es6中 “标签模板”的一个重要应用

最新推荐文章于 2025-06-25 15:17:55 发布

原创最新推荐文章于 2025-06-25 15:17:55 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

es6 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了标签模板的重要应用，一是过滤 HTML 字符串，可防止用户输入恶意内容，经函数处理能转义特殊字符；二是用于多语言转换，即国际化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。

let message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);

    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

标签模板的另一个应用，就是多语言转换（国际化处理）。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"