模版字符串与展开运算符

1.模版字符串

ES5 中我们表示字符串的时候使用 ' ' 或者 " "

在 ES6 中，我们还有一个东西可以表示字符串，就是``` `（反引号）

let str = `hello world`
console.log(typeof str) // string

和单引号好友双引号的区别

• 反引号可以换行书写，并且空格，回车也算入其内

// 这个单引号或者双引号不能换行，换行就会报错了
let str = 'hello world' 

// 下面这个就报错了
let str2 = 'hello 
world'

let str = `
    hello
    world
`
console.log(str) // 是可以使用的

反引号可以直接在在``` 里面用${ }` 拼接变量（常用）

ES5中字符串拼接变量

// ES5 需要字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str) // hello100world100

// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum'
console.log(str2) // hellonumworldnum

ES6中模板字符串拼接变量

// ES6模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100

2.展开运算符

ES6 里面号新添加了一个运算符 ... ，叫做展开运算符。作用是把数组或对象展开，将一个数组转为用逗号分隔的参数序列。

1.将数组展开

let arr1 = [11,22,33]
console.log(arr1[0],arr1[1],arr1[2]);  // 11 22 33

console.log(...arr1);  // 11 22 33

2.合并数组

let arr2 = [1,2,3,4];
let arr3 = ['a','b','c','d'];
let arr4 = [false,true,'hello world'];
//传统写法，使用concat()方法
let arr5 = arr2.concat(arr3,arr4);
console.log(arr5);

// 通过 展开运算符 实现 数组的拼接
let arr6 = [...arr2,...arr3,...arr4];
console.log(arr6);

3.合并对象

// 合并对象
let obj = {uname: '美男子', age: 18}
let obj2 = {
    ...obj,
    sex: '男'
}
console.log(obj2)  // {uname: '美男子', age: 18, sex: '男'}

4.将类数组转成真正的数组

function fn1(){
    console.log(arguments);

    let a = [...arguments];
    console.log(a);
}
fn1(1,55,87,23,56,90)


let ali = document.querySelectorAll('ul>li');
console.log(ali);
let alis = [...ali];
console.log(alis);

5.函数传递参数

// 参数--形参
function fn(...data) {
    console.log(data); // [11, 222, 33]
}
fn(11,222,33)

// 参数--实参
let arr = [1, 2, 3]
function fn(a, b, c) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}
fn(...arr);   // 等价于 fn(1, 2, 3)