ES6 简介（一）
一、 概述
1、 导读
ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。
ES6经过持续几年的磨砺,它已成为 JS 有史以来最实质的升级,特性涵盖范围甚广, 小到受欢迎的语法糖,例如箭头函数(arrow functions)和简单的字符串插值(string interpolation),大到烧脑的新概念,例如代理(proxies)和生成器(generators)；它将彻底改变程序员们编写JS代码的方式。
2、 Babel 转码器
2.1 是什么
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
安装 Babel ：npm install --save-dev @babel/core
2.2 配置文件 .babelrc
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# 最新转码规则
npm install --save-dev @babel/preset-env
# react 转码规则
npm install --save-dev @babel/preset-react
然后，将这些规则加入 .babelrc。
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
注意，以下所有 Babel 工具和模块的使用，都必须先写好 .babelrc。
2.3 命令行转码
Babel 提供命令行工具@babel/cli，用于命令行转码。 它的安装命令：npm install --save-dev @babel/cli
使用语法：
# 转码结果输出到标准输出
npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
npx babel example.js --out-file compiled.js
# 或者
npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
npx babel src --out-dir lib
# 或者
npx babel src -d lib
# -s 参数生成source map文件
npx babel src -d lib -s
2.4 babel-node
@babel/node模块的babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。 首先，安装这个模块：npm install --save-dev @babel/node
然后，执行 babel-node 就进入 REPL 环境。
npx babel-node
# >(x => x * 2)(1)
# >2
babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js ，然后直接运行。
npx babel-node es6.js
2.5 @babel/register
@babel/register模块改写require命令，为它加上一个钩子。此后，每当使用 require 加载 .js 、.jsx 、.es 和 .es6 后缀名的文件，就会先用 Babel 进行转码。
npm install --save-dev @babel/register
使用时，必须首先加载 @babel/register。
// index.js
require('@babel/register');
require('./es6.js');
@babel/register只会对
require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
2.6 polyfill
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的API，比如 Iterator 、Generator 、Set 、Map 、Proxy 、Reflect 、Symbol 、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码。
举例来说，ES6 在 Array 对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用 core-js 和 regenerator-runtime (后者提供 generator 函数的转码)，为当前环境提供一个垫片。
安装命令：npm install --save-dev core-js regenerator-runtime
然后，在脚本头部，加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);
Babel 默认不转码的 API 非常多，详细清单可以查看 babel-plugin-transform-runtime 模块的 definitions.js 文件。
2.7 浏览器环境
Babel 也可以用于浏览器环境，使用@babel/standalone模块提供的浏览器版本，将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js" rel="external nofollow" ></script>
<script type="text/babel">
// Your ES6 code
</script>
注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel提供一个REPL在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。
二、 变量
1、 let
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
for循环的计数器，就很合适使用let命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
var命令会发生**“变量提升”**现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
let不允许在相同作用域内，重复声明同一个变量。
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
同时，ES6 还可以在块级作用域声明函数：
- 允许在块级作用域内声明函数。
- 函数声明类似于 var，即会提升到全局作用域或函数作用域的头部。
- 同时，函数声明还会提升到所在的块级作用域的头部。
注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。
考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。
2、 const
const声明一个只读常量。一旦声明，常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
注意：
- const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
- const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。
- const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后使用
- const 声明的常量，也与let一样不可重复声明。
本质 const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
const foo = {
};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {
}; // TypeError: "foo" is read-only
3、 ES6 声明变量
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。
4、 顶层对象的属性
顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5之中，顶层对象的属性与全局变量是等价的。
window.a = 1;
a // 1
a = 2;
window.a // 2
顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。
这样的设计带来了几个很大的问题：
- 没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）
- 程序员很容易不知不觉地就创建了全局变量（比如打字出错
- 顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。
ES6 为了改变这一点：
- 为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性
- let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。
var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1
let b = 1;
window.b // undefined
上面代码中，全局变量 a 由 var 命令声明，所以它是顶层对象的属性；全局变量 b 由 let 命令声明，所以它不是顶层对象的属性，返回 undefined 。
5、 globalThis 对象
JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的。
- 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
- 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
- Node 里面，顶层对象是global，但其他环境都不支持。
同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。
- 全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。
- 函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
- 不管是严格模式，还是普通模式，new Function(‘return this’)()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。
综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。
// 方法一
(typeof window !== 'undefined'
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
// 方法二
var getGlobal = function () {
if (typeof self !== 'undefined') {
return self; }
if (typeof window !== 'undefined') {
return window; }
if (typeof global !== 'undefined') {
return global; }
throw new Error('unable to locate global object');
};
ES2020 在语言标准的层面，引入 globalThis 作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。
垫片库 global-this 模拟了这个提案，可以在所有环境拿到 globalThis 。ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
三、 解构和赋值
1、 数组的解构赋值
1.1 语法
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
// ES5
let a = 1;
let b = 2;
let c = 3;
// ES，可以这样写
let [a, b, c] = [1, 2, 3];
本质上，这种写法属于**“模式匹配”**，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []另一种情况是
不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
对于Set 结构，也可以使用数组的解构赋值。
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。
function* fibs() {
// Generator 函数
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5
1.2 默认值
解构赋值允许有默认值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。
let x; if ([1][0] === undefined) { x = f(); } else { x = [1][0]; }
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
2、 对象的解构赋值
2.1 语法
解构不仅可以用于数组，还可以用于对象。
let {
foo, bar } = {
foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果解构失败，变量的值等于undefined。
对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
// 将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上 let { log, sin, cos } = Math; // 将console.log赋值到log变量。 const { log } = console; log('hello') // hello
复杂的对象结构赋值：
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let {
loc, loc: {
start }, loc: {
start: {
line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
数组一样，解构也可以用于嵌套结构的对象。
2.2 默认值
对象的解构也可以指定默认值。
var {
x = 3} = {
};
x // 3
var {
x, y = 5} = {
x: 1};
x // 1
y // 5
var {
x: y = 3} = {
};
y // 3
var {
x: y = 3} = {
x: 5};
y // 5
var {
message: msg = 'Something went wrong' } = {
};
msg // "Something went wrong"
默认值生效的条件是，对象的属性值严格等于undefined。
var { x = 3} = { x: undefined}; x // 3 var { x = 3} = { x: null}; x // null
3、 字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个
length属性，因此还可以对这个属性解构赋值。let { length : len} = 'hello'; len // 5
4、 函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
下面是另一个例子。
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]
函数参数的解构也可以使用默认值。
function move({
x = 0, y = 0} = {
})
{
return [x, y];
}
move({
x: 3, y: 8}); // [3, 8]move({x: 3}); // [3, 0]move({}); // [0, 0]move(); // [0, 0]
5、 用途
-
交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];上面代码交换变量
x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。 -
从函数返回多个值
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
-
函数参数的定义
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({ x, y, z}) { ... } f({ z: 3, y: 2, x: 1}); -
提取 JSON 数据
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; // data: number 约等于 number = data console.log(id, status, number); // 42, "OK", [867, 5309] -
指定函数参数的默认值
jQuery.ajax = function (url, { async = true, beforeSend = function () { }, cache = true, complete = function () { }, crossDomain = false, global = true, // ... more config } = { }) { // ... do stuff }; -
遍历 Map 结构
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world // 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }任何部署了 Iterator 接口的对象，都可以用
for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。 -
输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
四、 字符串扩展
1、 字符的 Unicode 表示法
ES6 加强了对 Unicode 的支持，允许采用 \uxxxx 形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。
"\u0061"
// "a"
但是，这种表示法只限于码点在 \u0000 ~ \uFFFF 之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
"\uD842\uDFB7"
// "????"
"\u20BB7"
// " 7"
上面代码表示，如果直接在 \u 后面跟上超过 0xFFFF 的数值（比如 \u20BB7 ），JavaScript 会理解成 \u20BB+7 。由于 \u20BB 是一个不可打印字符，所以只会显示一个空格，后面跟着一个 7 。
ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。
"\u{20BB7}"
// "????"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{
6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true
js 中表示字符串的方法：
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
2、 字符串的遍历器接口
ES6 为字符串添加了遍历器接口，使得字符串可以被 for…of 循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint);
}
// "f"
// "o"
// "o"
3、 模板字符串
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${
basket.count}</b> items
in your basket, <em>${
basket.onSale}</em>
are on sale!
`);
模板字符串（template string）是增强版的字符串，用反引号标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${
name}, how are you ${
time}?`
上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
var greeting = `\`Yo\` World!`;
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
上面代码中，所有模板字符串的空格和换行，都是被保留的，比如 标签前面会有一个换行。如果你不想要这个换行，可以使用
trim方法消除它。$('#list').html(` <ul> <li>first</li> <li>second</li> </ul> `.trim());
大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
var x = 1;
var y = 2;
`${
x} + ${
y} = ${
x + y}`
// "1 + 2 = 3"
`${
x} + ${
y * 2} = ${
x + y * 2}`
// "1 + 4 = 5"
var obj = {
x: 1, y: 2};
`${
obj.x + obj.y}`
// 3
// 内部还可以调用函数
function fn() {
return "Hello World";
}
`foo ${
fn()} bar`
// foo Hello World bar
如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的 toString 方法。
嵌套模板字符串：
const tmpl = addrs => `
<table>
${
addrs.map(addr => `
<tr><td>${
addr.first}</td></tr>
<tr><td>${
addr.last}</td></tr>
`).join('')}
</table>
`;
const data = [
{
first: '<Jane>', last: 'Bond' },
{
first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
4、 标签模板
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
alert`123`
// 等同于
alert(123)
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
let a = 2;
console.log`123 ${
a} asd`;
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
var a = 5;
var b = 10;
tag`Hello ${
a + b } world ${
a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
如：
let total = 30;
let msg = passthru`The total is ${
total} (${
total*1.05} with tax)`;
function passthru(literals) {
// 除了使用默认的 arguments 来接收不定长参数 也可以使用 ...values 来接收不定长参数
let result = '';
let i = 0;
console.log(literals) // 其为一个数组
while (i < literals.length) {
result += literals[i++];
if (i < arguments.length) {
result += arguments[i];
}
}
return result;
}
console.log(msg) // "The total is 30 (31.5 with tax)"
5、 新增方法
传统上，JavaScript 只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
如果使用第二个参数 n 时， endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符，而其他两个方法针对从第 n 个位置直到字符串结束。
实例方法：repeat()
-
repeat方法返回一个新字符串，表示将原字符串重复 n 次。'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""
实例方法：padStart()，padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。 padStart() 用于头部补全， padEnd() 用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
如果省略第二个参数，默认使用空格补全长度。
实例方法：trimStart()，trimEnd()
ES2019 对字符串实例新增了 trimStart() 和 trimEnd() 这两个方法。它们的行为与trim() 一致， trimStart()消除字符串头部的空格，trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"