如何在 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>`;
    }
}

我有一些其他方法可以根据用户 input/interaction 更新页码，但我希望它能在调用 getButtonHtml 时工作，return 值将是<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 被立即解释。

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

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

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

如何在 javascript 中创建动态内插字符串？

How can I create a dynamically interpolated string in javascript?

javascript

string-interpolation

typescript

ecmascript-6