ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol

一、字符串模板基本使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

二、标签模板字符串使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的JavaScript的函数：
在这里插入图片描述
如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：

模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；

三、函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；
而在ES6中，我们允许给函数一个默认值：

默认值也可以和解构一起来使用：
在这里插入图片描述

另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了：
在这里插入图片描述

// ES5以及之前给参数默认值
/*
* 缺点：
* 1. 写起来麻烦，并且代码阅读性比较差
* 2. 这种写法有bug
* */
function foo(m, n) {m = m || 'aaa'n = n || 'bbb'console.log(m, n)
}
foo() // aaa bbb
foo(0, '') // aaa bbb// 1.ES6可以给函数参数提供默认值
function bar(m = 'aaa', n = 'bbb') {console.log(m, n)
}
bar('hhh') // hhh bbb// 2.对象参数和默认值以及解构
// function printInfo(info = {name: 'why', age: 18}) {
//     console.log(info.name, info.age)
// }
function printInfo({name, age} = {name: 'why', age: 18}) {console.log(name, age)
}
printInfo() // why 18
printInfo({name: 'zep', age: 22}) // zep 22// 另一种写法
function printInfo2({name = 'zep', age = 33} = {}) {console.log(name, age)
}
printInfo2() // zep 33// 3.有默认值的形参最好放到最后
function bar2(x, y, z = 30) {console.log(x, y, z)
}
bar2(10, 20) // 10 20 30function bar3(z = 30, x, y) {console.log(x, y, z)
}
bar3(10, 20) // 20 undefined 10
bar3(undefined, 10, 20) // 10 20 30// 4. 有默认值的函数的length属性
console.log(bar3.length) // 0
console.log(bar2.length) // 2
function baz(x, y, z, m = 30, n) {console.log(x, y, z, m, n)
}
console.log(baz.length) // 3

四、函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

在这里插入图片描述

那么剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；
剩余参数必须放到最后一个位置，否则会报错。