在 ES6/ES2015 中使用模板字符串-JavaScript中文网-JavaScript教程资源分享门户

在 ES6/ES2015 的规范中，新增了一种字符串的写法，称为模板字符串(template string)。它通过反引号`来界定，可以方便地在字符串中插入变量和表达式，同时也支持多行文本。

1. 简单的字符串拼接

在 ES6/ES2015 之前，我们通常使用字符串拼接来将变量和字符串连接在一起。例如：

var name = 'Tom'
console.log('Hello, ' + name + '!')

使用模板字符串，上面的代码可以写为：

const name = 'Tom'
console.log(`Hello, ${name}!`)

使用`${}`语法，可以将变量直接插入字符串中。这样看起来更加简洁明了，同时也避免了繁琐的字符串拼接操作。

2. 模板字符串支持表达式

除了插入变量，模板字符串还支持插入表达式。例如：

console.log(`1 + 2 = ${1 + 2}`)

输出：1 + 2 = 3

3. 多行文本

传统的字符串只支持单行文本，如果想要表示多行文本，需要使用\n等转义字符来换行。而模板字符串则支持自然的多行文本表示，示例如下：

console.log(`
  <ul>
    <li>${name}</li>
    <li>${age}</li>
    <li>${address}</li>
  </ul>
`)

4. 标签模板(Tagged Template)

除了上述基本功能，模板字符串还支持标签模板(Tagged Template)，这是一种高级功能，可以用于进行更加复杂的字符串处理。

标签模板通过在模板字符串前面添加一个函数名，来对模板字符串进行处理。函数的第一个参数是一个数组，里面包含了模板字符串中${}位置的变量、表达式等替换值，其余参数是模板字符串中未被替换的部分。

示例如下：

// javascriptcn.com 代码示例
function format(strings, ...values) {
  let result = ''
  for (let i = 0; i < strings.length; i++) {
    result += strings[i]
    if (i < values.length) {
      result += values[i]
    }
  }
  return result
}

console.log(format`Hello, ${name}!`)

输出：Hello, Tom!

上述代码中，我们定义了一个名为format的函数，它是标签模板，用于将模板字符串中的变量和表达式替换掉，并返回替换后的字符串。函数的第一个参数strings是一个数组，包含了模板字符串中那些未被${}替换的部分，...values则是一个不定长度的参数，包含了模板字符串中${}位置的变量、表达式等替换值。

5. 总结

通过本文的介绍，我们了解到了 ES6/ES2015 中的模板字符串的基本使用方法，以及标签模板的高级功能。使用模板字符串可以简化字符串的拼接操作，同时也可以提高代码的可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65487cf77d4982a6eb2bf9d4