了解 JavaScript 中的标记模板文字

百变鹏仔 3天前 #JavaScript

文章标签标记

什么是标记模板文字？

带标签的模板文字涉及以函数为前缀的模板文字，称为标签。该函数可以处理和操作文字的内容。这是一个简单的例子：

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);

标记模板文字的用例

国际化（i18n）

带标签的模板文字可以根据用户的区域设置动态翻译字符串。这是使用日语的示例：

function i18n(strings, ...values) {    const translations = {        'hello, ': 'こんにちは、',        '! how are you?': '！元気ですか？',    };    return strings.reduce((result, str, i) =&gt; result + translations[str] + (values[i] || ''), '');}const name = 'アリス';const greeting = i18n`hello, ${name}! how are you?`;console.log(greeting); // output: "こんにちは、アリス！元気ですか？"

2. 自定义字符串格式

他们还可以实现自定义格式化逻辑，例如转义 html。

function escapeHTML(strings, ...values) {    const escape = (str) =&gt; str.replace(/&amp;/g, '&amp;').replace(/, '/g, '&gt;');    return strings.reduce((result, str, i) =&gt; 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 中的动态字符串操作提供了多功能工具。它们可以简化国际化和自定义字符串格式等任务，从而产生更具表现力和可维护的代码。

文章推荐

了解 JavaScript 中的标记模板文字

什么是标记模板文字？

标记模板文字的用例

2. 自定义字符串格式

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？