js高级之｜ES6字符串模板、剩余参数和symbol

最新推荐文章于 2024-04-22 02:00:00 发布

安佳233

最新推荐文章于 2024-04-22 02:00:00 发布

阅读量304

点赞数

分类专栏： JS高级文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_45313933/article/details/128660223

版权

1. 字符串模板``的使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

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

//原来多定义引引加加
console.log("my name is " + name + ", age is " + age + ", height is " + height)

// ES6提供模板字符串 ``
const message = `my name is ${name}, age is ${age}, height is ${height}`

${ } 内部还能进行计算或者调用函数

1. 计算式

const info = `age double is ${age * 2}`

2. 函数

function doubleAge() {

return age * 2

}

const info2 = `double age is ${doubleAge()}`

2. 标签模板字符串

def：在函数后面加上字符串进行调用，称之为标签模板字符串 foo``

// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}
function foo(m, n, x) {
  console.log(m, n, x, '---------')
}

const name = "why"
const age = 18

foo`Hello${name}Wo${age}rld`// ['Hello', 'Wo', 'rld'] why ------

开发中很少用，但是在框架比如react中有常用，有助于看框架源码。

3. 函数的默认参数

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

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；

1. 而在ES6中，我们允许给函数一个默认值：

// ES5以及之前给参数默认值
/**
 * 缺点:
 *  1.写起来很麻烦, 并且代码的阅读性是比较差
 *  2.这种写法是有bug
 */
function foo1(m, n) {
  m = m || "aaa"
  n = n || "bbb"//给默认值的目的是防止出现undefined
  console.log(m, n)
}
foo1()//aaa bbb
foo1(0,"")//依旧是aaa bbb，出现bug

// 1.ES6可以给函数参数提供默认值
//直接在定义函数时给形参赋值默认值
function foo(m = "aaa", n = "bbb