字符串方法

  • 去除首尾空格:trim()
  • includes()方法:在给定文本存在于字符串中的任意位置时会返回 true ,否则返回
    false;
  • startsWith()方法:在给定文本出现在字符串起始处时返回 true ,否则返回 false;
  • endsWith()方法:在给定文本出现在字符串结尾处时返回 true ,否则返回 false。
  • repeat():重复字符串次数

模板字面量

模板字面量的最简单语法,是使用反引号( ` )来包裹普通字符串,而不是用双引号或单
引号。

参考以下例子:

let message = `Hello world!`;
console.log(message); // "Hello world!"
console.log(typeof message); // "string"
console.log(message.length); // 1

此代码说明了 message 变量包含的是一个普通的JS字符串。模板字面量语法被用于创建一
个字符串值,并被赋值给了 message 变量。

若你想在字符串中包含反引号,只需使用反斜杠( \ )转义即可,就像下面这个版本的
message 变量:

let message = `\`Hello\` world!`;
console.log(message); // "`Hello` world!"
console.log(typeof message); // "string"
console.log(message.length); // 14

而在ES6模板字面量中无需对双引号或单引号进行转义。

多行字符串

ES6 的模板字面量使多行字符串更易创建,因为它不需要特殊的语法。只需在想要的位置包含换行即可,而且它会显示在结果中。例如:

let message = `Multiline
string`;
console.log(message); // "Multiline
// string"
console.log(message.length); //

制造替换位

替换位允许你将任何有效的JS表达式嵌入到模板字面量中,并将其结果输出为字符串的一部分。

替换位由起始的${与结束的}来界定,之间允许放入任意的JS表达式。最简单的替换位允许你将本地变量直接嵌入到结果字符串中,例如:
let name = "Nicholas",
message = `Hello, ${name}.`;
console.log(message); // "Hello, Nicholas."

替换位 ${name} 会访问本地变量 name ,并将其值插入到 message 字符串中。 message变量会立即保留该替换位的结果。

既然替换位是 JS 表达式,那么可替换的就不仅仅是简单的变量名。你可以轻易嵌入计算、函数调用,等等。

标签化模板

现在你已了解模板字面量在无须连接的情况下,是如何创建多行字符串以及将值插入字符串。不过模板字面量真正的力量来源于标签化模板。一个模板标签( template tag )能对模板字面量进行转换并返回最终的字符串值,标签在模板的起始处被指定,即在第一个 ` 之前,如下所示:

let message = tag`Hello world`;

在本例中, tag 就是会被应用到 Hello world 模板字面量上的模板标签。

定义标签

一个标签( tag )仅是一个函数,它被调用时接收需要处理的模板字面量数据。标签所接收的数据被划分为独立片段,并且必须将它们组合起来以创建结果。第一个参数是个数组,包含被 JS 解释过的字面量字符串,随后的参数是每个替换位的解释值。

标签函数的参数一般定义为剩余参数形式,以便更容易处理数据,如下:

function tag(literals, ...substitutions) {
// 返回一个字符串
}

为了更好地理解传递给标签的是什么参数,可研究下例:

let count = 10,
price = 0.25,
message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;

如果你拥有一个名为 passthru() 的函数,该函数将会接收到三个参数。首先是一个
literals 数组,包含如下元素:

  • 在首个替换位之前的空字符串( "" );
  • 首个替换位与第二个替换位之间的字符串( " items cost $" );
  • 第二个替换位之后的字符串( "." )。

接下来的参数会是 10 ,也就是 count 变量的解释值,它也会成为 substitutions 数组的第一个元素。最后一个参数则会是 "2.50" ,即 (count * price).toFixed(2) 的解释值,并且会是 substitutions 数组的第二个元素。

需要注意 literals 的第一个元素是空字符串,以确保literals[0]总是字符串的起始部分,正如 literals[literals.length - 1] 总是字符串的结尾部分。同时替换位的元素数量也总是比字面量元素少 1 ,意味着表达式 substitutions.length === literals.length - 1 的值
总是 true 。

使用这种模式,可以交替使用 literals 与 substitutions 数组来创建一个结果字符串:以literals 中的首个元素开始,后面紧跟着 substitutions 中的首个元素,如此反复,直到结果字符串被创建完毕。你可以像下例这样交替使用两个数组中的值来模拟模板字面量的默认行为:

function passthru(literals, ...substitutions) {
    let result = "";
    // 仅使用 substitution 的元素数量来进行循环
    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    // 添加最后一个字面量
    result += literals[literals.length - 1];
    return result;
}
let count = 10,
price = 0.25,
message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message); // "10 items cost $2.50."
使用模板字面量中的原始值

模板标签也能访问字符串的原始信息,主要指的是可以访问字符在转义之前的形式。获取原始字符串值的最简单方式是使用内置的 String.raw() 标签。例如:

let message1 = `Multiline\nstring`,
message2 = String.raw`Multiline\nstring`;
console.log(message1); // "Multiline
// string"
console.log(message2); // "Multiline\\nstring"