1、对Unicode 的支持：codePointAt()、fromCodePoint()
在ES5中，我们经常使用charAt() 来表示字符存储位置，用charCodeAt() 来表示对应位置字符Unicode 的编码。在JavaScript 内部，字符以UTF-16 的形式存储，每个字符固定为2个字节，对于那些需要4个字节存储的字符并不支持。因此，ES6使用 codePointAt() 方法来支持存储4字节的字符：
var s = '猿';
console.log(s.codePointAt(0)); // 29503
在 ES5 中，从码点返回对应的字符的方法是 fromCharCode()，这个并不能返回字符为32位的utf-16 的字符。ES6 中使用 String.fromCodePoint() 代替：
console.log(String.fromCodePoint(29503)); // 猿
2、字符串的遍历接口： for..of...
for(let str of 'yuan') {
console.log(str);
}
// y
// u
// a
// n
3、判断字符串是否包含在另一个字符串中
在ES5 中使用的是 indexOf() 方法，在ES6中可以使用includes()、startsWith()、endsWith()三个方法。
includes(): 返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，参数是否在源字符串的头部。
endsWith()： 返回布尔值，参数是否在源字符串的尾部。
var str = "yuan is an animal";
str.startsWith("is"); // false
str.endsWith(" animal"); // true
str.includes("an"); // true
接受第二个参数，可选的，表示开始搜索的位置。
var str = "yuan is an animal";
str.startsWith("a", 1); // false
str.endsWith("an", 3); // false
str.includes("w", 4); // false
使用第二个参数n时，endsWith() 指的是针对前n 个字符，二其它两个方法是指开始位置的字符到结束位置的字符。
4、字符串重复复制：repeat();
repeat() 方法返回一个新字符串，表示将院字符串重复n 次。
'o'.repeat(3); // 'ooo'
'ha'.repeat(2); // 'haha'
'yuan'.repeat(0); ''
注意：当repeat() 方法里的参数为小数时，会自动取整；为负数或者Infinity 时会报错；参数接近为0时，参数为0；参数为NaN、字符串时会先转化为Number 再进行转化。
5、字符串补全：padStart()、padEnd()
表达式：str.padEnd(targetLength [, padString])
第一个参数targetLength 表示指定字符串的长度，第二个参数padString（可选）表示用来补全的字符串。
其它注意事项参照：
padStart()：用于头部补全。
padEnd()：用于尾部补全。
's'.padStart(4, 'ab'); // 'abas'
's'.padEnd(7, 'dd2'); // '7dd2dd2'
6、模板字符串
语法：
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`
模板字符串使用反引号（）来代替普通字符串的单引号和双引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认的函数，该函数负责将所有的部分连接起来，如果模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理，在模板字符中使用反引号（`）时，需要在它前面加上转义符（\）。
多行字符串
console.log(`string text line 1
string text line 2`)
// string text line 1
// string text line 2
表达式插补
var a = 2;
var b = 4;
console.log(`${a + b} is six`) // 6 is six
带标签的模板字符串
更高级的形式模板字面值被标记模板文本。标记使您可以分析模板文本功能。标记功能的第一个参数包含一个字符串值的数组。其余参数时相关的表达式。最后，你的函数可以返回处理好的字符串。
var person = 'Mike';
var age = 28;
function tagFunc(strings, personExp, ageExp) {
var str0 = strings[0]; // "that "
var str1 = strings[1]; // " is a "
// 在技术上,有一个字符串在
// 最终的表达式 (在我们的例子中)的后面,
// 但它是空的(""), 所以被忽略.
// var str2 = strings[2];
var ageStr;
if (ageExp > 60){
ageStr = 'old person';
} else {
ageStr = 'young person';
}
return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output); // that Mike is a young person
rest 参数的写法
let name = '张三',
age = 20,
message = show`我来给大家介绍:${name}的年龄是${age}.`;
function show(stringArr,...values){
let output ="";
let index = 0
for(;index<values.length;index++){
output += stringArr [index]+values[index];
}
output += stringArr [index];
return output;
}
message; //"我来给大家介绍:张三的年龄是20."
标签函数并不一定需要返回一个字符串
function template(strings, ...keys) {
return (function(...values) {
var dict = values[values.length - 1] || {};
var result = [strings[0]];
keys.forEach(function(key, i) {
var value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
return result.join('');
});
}
var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A'); // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'}); // "Hello World!"
原始字符串
在标签函数的第一个参数中，存在一个特殊的属性raw，我们可以通过它来访问模板字符串的原始字符串。
function tag(strings, ...values) {
console.log(strings.raw[0]);
}
tag`strings text line 1 \n string text line 2`;
// strings text line 1 \n string text line 2
此外，使用String.raw()方法创建原始字符串和使用默认的模板函数和字符串连接创建时一样的。
String.raw`hello\n${44+44}!`
// "hello\n88!"
章节目录
1、ES6中啥是块级作用域？运用在哪些地方？
2、ES6中使用解构赋值能带给我们什么？
3、ES6字符串扩展增加了哪些？
4、ES6对正则做了哪些扩展？
5、ES6数值多了哪些扩展？
6、ES6函数扩展（箭头函数）
7、ES6 数组给我们带来哪些操作便利？
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用？
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼？
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步：Generator 函数
15、JavaScript 异步操作进阶第三步：async 函数
16、ES6 构造函数语法糖：class 类
网友评论