How can I create a dynamically interpolated string in javascript?

Question

I'm working on creating a reusable UI component and am trying to figure out how to allow the consumer of the component to provide their own template for a particular area of the component.

I'm using typescript and am trying to utilize string interpolation to accomplish this as it seemed the most appropriate course of action.

Here is what I have so far:

export class Pager {
    pageNumber: number = 1;

    getButtonHtml(buttonContentTemplate?: string, isDisabled?: boolean): string {
        buttonContentTemlpate = buttonContentTemplate || '${this.pageNumber}';
        isDisabled = isDisabled || false;
        return `<button id="button-id" type="button"  ${!isDisabled ? '' : disabledAttribute}>
                    ${buttonContentTemplate}
                </button>`;
    }
}

I have some other methods that will update the page number based off user input/interaction, but I want it to work that when getButtonHtml gets called, the return value would be <button id="button-id" type="button">1</button>, but instead I'm getting <button id="button-id" type="button">${this.pageNumber}</button>.

Is there a way to get javascript to evaluate the string again, and interpolate the remaining place holders?

I've looked at the MDN article on this topic and think that the String.raw method might possibly be what I need to use, but I wasn't sure and no matter what I try, I haven't gotten it to work.

Any help would be greatly appreciated.

ES2015 template literals or one of many available template systems — Pointy
– Pointy, Commented Sep 22, 2016 at 15:17
Maybe my question isn't clear. I'm using the template literals and it is working for the disabled attribute, but the ${buttonContentTemplate} contains a template literal as well and that isn't being evaluated. Instead of putting 1 in there(which would happen if the template got evaluated), it is putting in ${this.pageNumber}. Is there a way to force javascript to evaluate it again and make this further replacement? — peinearydevelopment
– peinearydevelopment, Commented Sep 22, 2016 at 15:22
yes I see now. Well as mentioned in the answer below, template literals aren't easily composable that way. — Pointy
– Pointy, Commented Sep 22, 2016 at 15:26

styfle · Accepted Answer · 2016-09-22 15:22:48Z

6

The problem is that Template literals are interpreted immediately.

What you want to do is lazy load the template. So it would be best to pass in a function that returns a string.

export class Pager {
    pageNumber: number = 1;

    getButtonHtml(template?: () => string, isDisabled=false): string {
        template = template || function() { return this.pageNumber.toString() };
        return `<button id="button-id" type="button"  ${!isDisabled ? '' : disabledAttribute}>
                    ${template()}
                </button>`;
    }
}

Additionally, you can take advantage of default parameters to avoid the || trick.

answered Sep 22, 2016 at 15:22

styfle

25k30 gold badges93 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I create a dynamically interpolated string in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related