阅读 51

ES6系列-- 2. 字符串的扩展

模板字符串

+ 连接符

在 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') // true
s.endsWith('!') // true
s.includes('o') // true
复制代码

这三个方法都支持第二个参数,表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
复制代码

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

文章分类
前端