手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

环球最资讯丨ES6 简介（一）

2023-02-03 20:15:55 来源：博客园

ES6 简介（一）
- 一、概述
  - 1、导读
  - 2、 Babel 转码器
    - 2.1 是什么
    - 2.2 配置文件 .babelrc
    - 2.3 命令行转码
    - 2.4 babel-node
    - 2.5 @babel/register
    - 2.6 polyfill
    - 2.7 浏览器环境
- 二、变量
  - 1、 let
  - 2、 const
  - 3、 ES6 声明变量
  - 4、顶层对象的属性
  - 5、 globalThis 对象
- 三、解构和赋值
  - 1、数组的解构赋值
    - 1.1 语法
    - 1.2 默认值
  - 2、对象的解构赋值
    - 2.1 语法
    - 2.2 默认值
  - 3、字符串的解构赋值
  - 4、函数参数的解构赋值
  - 5、用途
- 四、字符串扩展
  - 1、字符的 Unicode 表示法
  - 2、字符串的遍历器接口
  - 3、模板字符串
  - 4、标签模板
  - 5、新增方法

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.jsrequire("@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); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet 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.1415PI = 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 // 1a = 2;window.a // 2

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。

这样的设计带来了几个很大的问题：

没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）
程序员很容易不知不觉地就创建了全局变量（比如打字出错
顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6 为了改变这一点：

为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性
let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;// 如果在 Node 的 REPL 环境，可以写成 global.a// 或者采用通用方法，写成 this.awindow.a // 1let 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）。

// ES5let a = 1;let b = 2;let c = 3;// ES，可以这样写let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ["a"];x // "a"y // undefinedz // []
另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [x, y] = [1, 2, 3];x // 1y // 2let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 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 // truelet [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=1let [x = 1, y = x] = [2];    // x=2; y=2let [x = 1, y = x] = [1, 2]; // x=1; y=2let [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 // 1loc  // Object {start: Object}start // Object {line: 1, column: 5}

数组一样，解构也可以用于嵌套结构的对象。

2.2 默认值

对象的解构也可以指定默认值。

var {x = 3} = {};x // 3var {x, y = 5} = {x: 1};x // 1y // 5var {x: y = 3} = {};y // 3var {x: y = 3} = {x: 5};y // 5var { message: msg = "Something went wrong" } = {};msg // "Something went wrong"

默认值生效的条件是，对象的属性值严格等于undefined。
var {x = 3} = {x: undefined};x // 3var {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 = dataconsole.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 " + basket.count + " " +  "items in your basket, " +  "" + basket.onSale +  " are on sale!");

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$("#result").append(`  There are ${basket.count} items   in your basket, ${basket.onSale}  are on sale!`);

模板字符串（template string）是增强版的字符串，用反引号标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串`In JavaScript "\n" is a line-feed.`// 多行字符串`In JavaScript this is not legal.`console.log(`string text line 1string text line 2`);// 字符串中嵌入变量let name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
var greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$("#list").html(`  first
  second
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如标签前面会有一个换行。如果你不想要这个换行，可以使用 trim方法消除它。
$("#list").html(`  first
  second
`.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 => `    ${addrs.map(addr => `      `).join("")}  ${addr.first}
    ${addr.last}
`;const data = [    { first: "", last: "Bond" },    { first: "Lars", last: "" },];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") // trues.endsWith("!") // trues.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"

关键词：全局变量可以使用原字符串

环球最资讯丨ES6 简介（一）

ES6 简介（一）

一、 概述

1、 导读

2、 Babel 转码器

2.1 是什么

2.2 配置文件 .babelrc

2.3 命令行转码

2.4 babel-node

2.5 @babel/register

2.6 polyfill

2.7 浏览器环境

二、 变量

1、 let

2、 const

3、 ES6 声明变量

4、 顶层对象的属性

5、 globalThis 对象

三、 解构和赋值

1、 数组的解构赋值

1.1 语法

1.2 默认值

2、 对象的解构赋值

2.1 语法

2.2 默认值

3、 字符串的解构赋值

4、 函数参数的解构赋值

5、 用途

四、 字符串扩展

1、 字符的 Unicode 表示法

2、 字符串的遍历器接口

3、 模板字符串

4、 标签模板

5、 新增方法