我如何在javascript中创建动态插值字符串

Question

我正在创建一个可重用的UI组件，并试图找出如何允许组件的消费者为组件的特定区域提供自己的模板。

我正在使用typescript，并试图利用字符串插值来完成此操作，因为它似乎是最合适的操作过程。

到目前为止我写的是:

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>`;
    }
}

我有一些其他的方法，将更新基于用户输入/交互的页码，但我希望它的工作，当getButtonHtml被调用，返回值将是<button id="button-id" type="button">1</button>，而不是我得到<button id="button-id" type="button">${this.pageNumber}</button>。

是否有办法让javascript再次评估字符串，并插入剩余的占位符?

我看过MDN关于这个主题的文章，并认为String.raw方法可能是我需要使用的，但我不确定，无论我尝试什么，我都没有让它工作。

Answer 1

问题是模板字量会立即被解释。

你要做的是延迟加载模板。因此，最好传入一个返回字符串的函数。

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>`;
    }
}

此外，您可以利用默认参数来避免||技巧。