javascript - 如何在 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

问题是 Template literals立即解释。

您要做的是延迟加载模板。所以最好传入一个返回字符串的函数。

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

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