使用 ES9 的模板字面量（Template Literals）让代码更干净-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要拼接字符串，比如拼接 HTML 模板、拼接 URL 参数等等。在过去，我们通常使用字符串拼接的方式来完成这些任务，但是这样会让代码变得难以阅读和维护。ES9 的模板字面量（Template Literals）提供了一种更加简洁、优雅的方式来拼接字符串，让代码更加干净。

模板字面量的语法

模板字面量使用反引号（`）括起来，里面可以包含普通字符串和表达式，表达式需要使用 ${} 包裹。例如：

const name = 'Alice';
const age = 18;
const message = `Hello, my name is ${name}, I'm ${age} years old.`;
console.log(message);

输出结果为：

Hello, my name is Alice, I'm 18 years old.

模板字面量的优点

使用模板字面量有以下几个优点：

更加简洁

使用模板字面量可以将字符串和表达式放在一起，不需要使用 + 号拼接字符串。这样可以使代码更加简洁。

// 使用普通字符串拼接
const url = 'https://example.com/api/' + path + '?page=' + page + '&limit=' + limit;

// 使用模板字面量拼接
const url = `https://example.com/api/${path}?page=${page}&limit=${limit}`;

更加易读

使用模板字面量可以让代码更加易读。使用 ${} 包裹表达式可以让代码更加直观，避免了过多的字符串拼接和转义。

// 使用普通字符串拼接
const message = 'Hello, my name is ' + name + ', I\'m ' + age + ' years old.';

// 使用模板字面量拼接
const message = `Hello, my name is ${name}, I'm ${age} years old.`;

更加安全

使用模板字面量可以避免 XSS 攻击。模板字面量会自动转义输出的字符串，避免了恶意代码注入。

const name = '<script>alert("XSS")</script>';
const message = `Hello, my name is ${name}.`;
console.log(message); // 输出结果为 Hello, my name is &lt;script&gt;alert("XSS")&lt;/script&gt;.

模板字面量的应用

模板字面量不仅可以用于字符串拼接，还可以用于多行字符串和标签模板。

多行字符串

使用模板字面量可以方便地创建多行字符串，不需要使用 \n 换行符。

const html = `
  <div class="container">
    <h1>Title</h1>
    <p>Content</p>
  </div>
`;

标签模板

标签模板是一种特殊的模板字面量，可以在模板字面量前面加上一个函数名，这个函数将会被调用来处理模板字面量。标签模板可以用于实现自定义的字符串处理逻辑，比如国际化、HTML 模板、CSS-in-JS 等。

-- -------------------- ---- -------
-------- ------------- ---------- -
  ----- -------- - -
    --- -
      ------ --------
      ------ --------
    --
    --- -
      ------ -----
      ------ -----
    --
  --
  ----- ---- - -------------------
  ----- ------- - ----------------------- ------- -- -- -
    ----- ----- - --------- -- ---
    ------ ------ - ------ - ----------------------
  -- ----
  ------ --------
-

----- ------- - ------------------ -------------
--------------------- -- ---------------- ------- ----------------------- ---- ----

总结

使用 ES9 的模板字面量可以让代码更加干净、简洁、易读和安全。模板字面量不仅可以用于字符串拼接，还可以用于多行字符串和标签模板。我们应该在开发中尽可能地使用模板字面量，让代码更加优雅。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/663e52ecd3423812e4c879ef