ES6语法之字符串的扩展

孙淑建发布于2019-08-21 18:32 / 2884人阅读

摘要：模板字符串连接符在之前，将字符串连接到一起的旧方法是使用字符串连接运算符。这样更容易构建字符串。返回布尔值，表示参数字符串是否在原字符串的头部。它针对前个字符，而其他两个方法针对从第个位置直到字符串结束。

模板字符串 + 连接符

在 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 + ",

" +
  "Please excuse " + student.name + ".
" +
  "He is recovering from the flu.

" +
  "Thank you,
" +
  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}`;

这是模板字面量的真正强大之处。在上述代码中，去掉了引号和字符串连接运算符，以及换行符 ( )。这是因为模板字面量也将换行符当做字符串的一部分！

提示：模板字面量中的嵌入式表达式不仅仅可以用来引用变量。你可以在嵌入式表达式中进行运算、调用函数和使用循环！

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个位置直到字符串结束。

GPU云服务器云服务器 es6字符串扩展 php 字符串语法 Python 之字符串 html的语法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90563.html

ES6语法之对象的扩展

摘要：方法的第一个参数是目标对象，后面的参数都是源对象。这个对象的任何变化，都会反映到目标对象上面。方法将和合并成一个新对象，如果两者有同名属性，则的属性值会覆盖的属性值。否则，对象的该属性很可能不起作用。对象字面量简写法你可能写过这样的代码：使用和所分配的变量名称相同的名称初始化对象。 let type = quartz; let color = rose; let carat = 2...

SillyMonkey 2019-08-21 18:32 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6语法之函数的扩展

摘要：函数的扩展函数参数的默认值之前，不能直接为函数的参数指定默认值，只能采用变通的方法。箭头函数引入了一种新的函数，叫做箭头函数。箭头函数和普通函数的行为非常相似，但是在语法构成上非常不同。意味着函数内的的值是全局对象，不是对象。函数的扩展函数参数的默认值 ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。 function log(x, y) { y = y ||...

Clect 2019-08-21 18:39 评论0 收藏0
ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0
工作中常用es6+特性

摘要：结合工作中使用情况，简单对进行一些复习总结，包括常用的语法，等，以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别，主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下，是一个标准化组织，他们结合工作中使用情况，简单对es6进行一些复习总结，包括常用的语法，api等，以及短时间内要上手需要重点学习的知识点（不同工作环境可能有一些差别），...

xcold 2019-08-23 18:39 评论0 收藏0