es6语法特性进阶（3）

发表于 | 阅读量 次
| 字数统计 2,038 | 阅读时长 8

字符串功能的增强
在以前在字符串中查找字符串的时候，都是使用indexOf方法。
ES6新增了三个方法来查找字符串。

includes() 方法会在给定文本存在于字符串中的任意位置时返回 true，否则返回 false 。
startsWith() 方法会在给定文本出现在字符串开头时返回 true，否则返回 false 。
endsWith() 方法会在给定文本出现在字符串末尾时返回 true，否则返回 false 。
每个方法都接收两个参数：需要搜索的文本和可选的起始索引值。
当提供第二个参数后，includes() 和 startsWith() 会以该索引为起始点进行匹配，而 endsWith() 则是字符串搜索的结束位置。
若第二个参数未提供，includes() 和 startsWith() 会从字符串的起始中开始检索，endsWith() 则是从字符串的末尾。
实际上，第二个参数减少了需要检索的字符串的总量。以下是使用这些方法的演示：

1
2
3
4
5
6
7
8
9
10
var msg = "Hello world!";
console.log(msg.startsWith("Hello"));       // true
console.log(msg.endsWith("!"));             // true
console.log(msg.includes("o"));             // true
console.log(msg.startsWith("o"));           // false
console.log(msg.endsWith("world!"));        // true
console.log(msg.includes("x"));             // false
console.log(msg.startsWith("o", 4));        // true
console.log(msg.endsWith("o", 8));          // true
console.log(msg.includes("o", 8));          // false

repeat方法
ECMAScript 6 还向字符串添加了 repeat() 方法，它接受一个数字参数作为字符串的重复次数。该方法返回一个重复包含初始字符串的新字符串，重复次数等于参数。例如：

1
2
3
console.log("x".repeat(3));         // "xxx"
console.log("hello".repeat(2));     // "hellohello"
console.log("abc".repeat(4));       // "abcabcabcabc"

字符串模板字面量

1
2
3
4
5
模板字面量是 ECMAScript 6 针对 JavaScript 直到 ECMAScript 5 依然缺失的如下功能的回应：
多行字符串  针对多行字符串的形式概念（formal concept）。
基本的字符串格式化  将字符串中的变量置换为值的能力。
转义 HTML  能将字符串进行转义并使其安全地插入到 HTML 的能力。
模板字面量以一种全新的表现形式解决了这些问题而不需要向 JavaScript 已有的字符串添加额外的功能。

基本语法
使用一对反引号 ``(tab正上方的按键)来表示模板字面量。

1
2
3
4
let message = `Hello world!`;   //使用模板字面量创建了一个字符串
console.log(message);               // "Hello world!"
console.log(typeof message);        // "string"
console.log(message.length);        // 12

注意：如果模板字符串中使用到了反引号，则应该转义。但是单双引号不需要转义

多行字符串
在ES5之前JavaScript是不支持多行字符串的。（但是在以前的版本中有一个大家都认为是bug的方式可以写出多行字符串，就是在尾部添加一个反斜杠 \）

1
2
3
 var s = "abc \
aaaaaa";
console.log(s); //但是输出的结果中不包括换行

但是在ES6中字符串的模板字面量轻松的解决了多行字符串的问题，而且没有任何新的语法

1
2
3
4
5
var s = `abc
aaaaa
dsalfja
dfadfja`;
console.log(s);

但是要注意： 反引号中的所有空格和缩进都是有效字符。

字符串置换
置换允许你将 JavaScript 表达式嵌入到模板字面量中并将其结果作为输出字符串中的一部分。
语法：${变量名、表达式、任意运算、方法调用等}
可以嵌入任何有效的JavaScript代码

1
2
3
var name = "李四";
var msg = `欢迎你${name}同学`;
console.log(msg)

什么是模板标签?
模板字面量真正的强大之处来源于模板标签。一个模板标签可以被转换为模板字面量并作为最终值返回。标签在模板的头部，即左 ` 字符之前指定，如下所示：

1
let message = myTag`Hello world`;

在上面的代码中，myTag就是模板标签。
myTag其实是一个函数，这个函数会被调用来处理这个模板字符串。

定义模板标签

一个标签仅代表一个函数，他接受需要处理的模板字面量。
标签分别接收模板字面量中的片段，且必须将它们组合以得出结果。
函数的首个参数为包含普通 JavaScript 字符串的数组。余下的参数为每次置换的对应值。
标签函数一般使用剩余参数来定义，以便轻松地处理数据。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let name = '张三',
    age = 20,
    message = show`我来给大家介绍${name}的年龄是${age}.`;
/*
    应该定义一个函数show：
    参数1：一个字符串数组。在本例中包含三个元素。
            0:"我来给大家介绍"
            1:"的年龄是"
            2:"."
    参数2和参数3：表示需要置换的字符串的值。  
    */
function show(stringArr, value1, value2) {
    console.log(stringArr); //
    console.log(value1);  // 张三
    console.log(value2);  // 20
    return "abc";
}
console.log(message); //abc

为了简化书写，一般把Value1和Value2写成剩余字符串的形式

1
function show(stringArr, ...values){}

解构的实用
在 ECMAScript 5 或更早的版本中，从对象或数组中获取特定的数据并赋值给本地变量需要书写很多并且相似的代码。例如：

1
2
3
4
5
6
7
let options = {
    repeat: true,
    save: false
};
// 从对象中提取数据
let repeat = options.repeat,
save = options.save;

这段代码反复地提取在 options 上存储地属性值并将它们传递给同名的本地变量。虽然这些看起来不是那么复杂，不过想象一下如果你的一大批变量有着相同的需求，你就只能一个一个地赋值。而且，如果你需要从对象内部嵌套的结构来查找想要的数据，你极有可能为了一小块数据而访问了整个数据结构。
这也是 ECMAScript 6 给对象和数组添加解构的原因。当你想要把数据结构分解为更小的部分时，从这些部分中提取数据会更容易些。很多语言都能使用精简的语法来实现解构操作。ECMAScript 6 解构的实际语法或许你已经非常熟悉：对象和数组字面量。

对象解构的基本形式

对象结构的语法就是在赋值语句的左侧使用类似对象字面量的结构。

1
2
3
4
5
6
7
8
let node = {
    type: "Identifier",
    name: "foo"
};
//这里就相当于声明了两个变量： type = node.type;  name:node.name
let { type, name } = node;
console.log(type);      // "Identifier"
console.log(name);      // "foo"

在上面的结构中必须要初始化。否则会出现语法错误。

1
2
3
4
5
6
// 语法错误！
var { type, name };
// 语法错误！
let { type, name };
// 语法错误！
const { type, name };

解构赋值表达式
如果声明的变量想改变他们的值，也可以使用解构表达式。

1
2
3
4
5
6
7
8
9
10
let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
//注意：此处必须要在圆括号内才能使用解构表达式
({type, name} = node);
console.log(type);      // "Identifier"
console.log(name);      // "foo""

对象解构时的默认值
如果赋值号右边的对象中没有与左边变量同名的属性，则左边的变量会是 undefined

1
2
3
4
5
6
7
8
9
let node = {
    type: "Identifier",
    name: "foo"
};
//因为node中没有叫value的属性，所以valued的值将会是undefined
let { type, name, value } = node;
console.log(type);      // "Identifier"
console.log(name);      // "foo"
console.log(value);     // undefined

不过我们也可以手动指定他的默认值。（这个和函数的参数默认值很像）

1
2
3
4
5
6
7
8
9
let node = {
    type: "Identifier",
    name: "foo"
};
//手动添加value的默认值为3
let { type, name, value = 3} = node;
console.log(type);      // "Identifier"
console.log(name);      // "foo"
console.log(value);     // 3

赋值给不同的变量名
在前面的操作中，都是把对象的属性值，赋值给同名变量。
其实也可以赋值给不同名的变量。

1
2
3
4
5
6
7
8
let node = {
    type: "Identifier",
    name: "foo"
};
// localType才是要定义的新的变量。  type是node的属性
let {type: localType, name: localName} = node;
console.log(localType);     // "Identifier"
console.log(localName);     // "foo"

注意：冒号后面才是要定义的新的变量，这个和我们的对象字面量不太一样！
这个地方也可以使用默认值。

1
2
3
4
5
6
7
let node = {
    type: "Identifier"
};
let { type: localType, name: localName = "bar" } = node;
console.log(localType);     // "Identifier"
console.log(localName);     // "bar"

访客的ip和所在地址： 访问时间: 当前时间:

殖民 wechat
欢迎您扫一扫上面的微信公众号
打赏不在多少，请鼓励一下！