ES6 中的模板字符串详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，新增了一种字符串表示方法，称为模板字符串（template string）。相比于传统的字符串表示方法，模板字符串具有更加方便和实用的特性。

模板字符串的基本用法

使用模板字符串的方法就是，使用反引号（`）包裹字符串内容。

let message = `Hello, World!`;
console.log(message); // 输出：Hello, World!

值得注意的是，在模板字符串中可以使用 ${} 语法，将变量插入到字符串中。

// 使用变量插入字符串
let name = `Tom`;
let message = `Hello, ${name}!`;
console.log(message); // 输出：Hello, Tom!

当需要多行字符串时，使用传统的字符串表示方法则十分繁琐，而使用模板字符串则可以轻松地实现。只需要在每行字符串后添加反斜杠（\），即可实现多行字符串的表示。

let multiLineMessage = `This is 
a multi-line 
message!`;
console.log(multiLineMessage);
// 输出：
// This is 
// a multi-line 
// message!

模板字符串的高级用法

在模板字符串中，${} 不仅可以用于变量的插入，还可以执行表达式。

let price = 10;
let amount = 5;
let totalPrice = `${price} * ${amount} = ${price * amount}`;
console.log(totalPrice); // 输出：10 * 5 = 50

在模板字符串的 ${} 中，也可以使用函数来执行处理。

function formatPrice(price) {
  return price.toFixed(2);
}

let price = 9.99;
let formattedPrice = `Price is $${formatPrice(price)}.`;
console.log(formattedPrice); // 输出：Price is $9.99.

另外，在模板字符串中，也可以使用标签函数（tagged template）对字符串进行自定义处理。标签函数是指在普通模板字符串前添加函数名称，使得该函数能够对模板字符串进行一些额外处理。

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

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

总结

模板字符串提供了一种简单、方便的字符串表示方式。通过反引号包裹字符串，${}语法可以实现变量与表达式的插入，并且支持多行字符串表示。模板字符串的高级用法包括函数式处理和标签函数，可以使得字符串处理更加灵活多变。掌握模板字符串的使用，能够提高前端开发效率，使代码更加优雅简洁。

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