模板字符串
+ 连接符
在 ES6 之前,将字符串连接到一起的旧方法是使用字符串连接运算符 (+)。
const student = { name: 'Richard Kalehoff', guardian: 'Mr. Kalehoff'};const teacher = { name: 'Mrs. Wilson', room: 'N231'}let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';//Returns:Richard Kalehoff please see Mrs. Wilson in N231 to pick up your report card.
上述代码能正常运行,但是当你需要连接多行字符串时,就变得更复杂。
let note = teacher.name + ',\n\n' + 'Please excuse ' + student.name + '.\n' + 'He is recovering from the flu.\n\n' + 'Thank you,\n' + student.guardian;
但是,在引入模板字面量(之前在 ES6 的开发版本中称为“模板字符串”)之后,这一切有了改变。
注意: 作为字符串连接运算符 ( + ) 的替代方法,你可以使用字符串的 concat() 方法。但是这两种方式都比较笨拙,无法模拟真正的字符串插值。
模板字面量
模板字面量本质上是包含嵌入式表达式的字符串字面量。
模板字面量用反引号表示,可以包含用 ${expression}
表示的占位符。这样更容易构建字符串。
下面是之前的示例使用模板字面量表示后的效果:
let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;
通过使用模板字面量,你不用再使用引号和字符串连接运算符。此外,你可以在表达式内引用对象的属性。
...那之前的多行示例该怎么办呢?
let note = `${teacher.name}, Please excuse ${student.name}. He is recovering from the flu. Thank you ${student.guardian}`;
这是模板字面量的真正强大之处。在上述代码中,去掉了引号和字符串连接运算符,以及换行符 ( \n )
。这是因为模板字面量也将换行符当做字符串的一部分!
提示:模板字面量中的嵌入式表达式不仅仅可以用来引用变量。你可以在嵌入式表达式中进行运算、调用函数和使用循环!
includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false
上面代码表示,使用第二个参数n
时,endsWith
的行为与其他两个方法有所不同。它针对前n
个字符,而其他两个方法针对从第n
个位置直到字符串结束。