带标签的模板文字涉及以函数为前缀的模板文字,称为标签。该函数可以处理和操作文字的内容。这是一个简单的例子:
function tag(strings, ...values) { console.log(strings); console.log(values); return 'processed string'; } const name = 'alice'; const greeting = tag`hello, ${name}! how are you?`; console.log(greeting);
带标签的模板文字可以根据用户的区域设置动态翻译字符串。这是使用日语的示例:
function i18n(strings, ...values) { const translations = { 'hello, ': 'こんにちは、', '! how are you?': '!元気ですか?', }; return strings.reduce((result, str, i) => result + translations[str] + (values[i] || ''), ''); } const name = 'アリス'; const greeting = i18n`hello, ${name}! how are you?`; console.log(greeting); // output: "こんにちは、アリス!元気ですか?"
他们还可以实现自定义格式化逻辑,例如转义 html。
function escapeHTML(strings, ...values) { const escape = (str) => str.replace(/&/g, '&').replace(/, '/g, '>'); return strings.reduce((result, str, i) => result + str + escape(values[i] || ''), ''); } const userInput = '<script>alert("XSS")</script>'; const sanitized = escapeHTML`User input: ${userInput}`; console.log(sanitized); // Output: "User input: <script>alert("XSS")</script>"
标记模板文字为 javascript 中的动态字符串操作提供了多功能工具。它们可以简化国际化和自定义字符串格式等任务,从而产生更具表现力和可维护的代码。