- 字符串的扩展
- 字符的Unicode表示法
- ES6使用大括号表示法表示字符
"\u{20BB7}" // "𠮷""\u{41}\u{42}\u{43}" // "ABC"let hello = 123; hell\u{6F} // 123'\u{1F680}' === '\uD83D\uDE80' // true
- JavaScript共有6种方法可以表示一个字符。个人感觉大括号表示法综合最好用。
'\z' === 'z' // true '\172' === 'z' // true '\x7A' === 'z' // true '\u007A' === 'z' // true '\u{7A}' === 'z' // true
- ES6使用大括号表示法表示字符
- at()
- ES5对字符串对象提供
charAt
方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF
的字符。'abc'.charAt(0) // "a" '𠮷'.charAt(0) // "\uD842"
- 目前,有一个提案,提出字符串实例的
at
方法,可以识别Unicode编号大于0xFFFF
的字符,返回正确的字符。'abc'.at(0) // "a" '𠮷'.at(0) // "𠮷"
- ES5对字符串对象提供
- includes(), startsWith(), endsWith()
- 传统上,JavaScript只有
indexOf
方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。 - includes():返回布尔值,表示是否找到了参数字符串。用法和indexOf方法类似
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
- 示例:
var s = 'Hello world!';s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // truevar t = 'Hello world!'; t.includes('Hello', 6) // false t.startsWith('world', 6) // true t.endsWith('Hello', 5) // true
- 注意(searchString, position)
//startsWith和includes:从前向后position索引从0开始可以包括position处信息//endsWith:从前向后position索引从0开始不包括position处信息
- 传统上,JavaScript只有
- repeat()
repeat
方法返回一个新字符串,表示将原字符串重复n
次。'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""
- 参数如果是小数,会被取整。
'na'.repeat(2.9) // "nana"
- 如果
repeat
的参数是负数或者Infinity
,会报错。'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError
- 但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于
-0
,repeat
视同为0。'na'.repeat(-0.9) // ""
- 参数
NaN
等同于0。'na'.repeat(NaN) // ""
-
如果
repeat
的参数是字符串,则会先转换成数字。'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"
- padStart(),padEnd()
- ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。
padStart
用于头部补全,padEnd
用于尾部补全。'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
-
上面代码中,
padStart
和padEnd
一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。'xxx'.padStart(2, 'ab') // 'xxx' 'xxx'.padEnd(2, 'ab') // 'xxx'
-
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789') // '0123456abc'
-
如果省略第二个参数,则会用空格补全长度。
'x'.padStart(4) // ' x' 'x'.padEnd(4) // 'x '
-
padStart
的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。'1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"
-
另一个用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
- ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。
- 模板字符串
- 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串 `In JavaScript '\n' is a line-feed.`// 多行字符串 `In JavaScript this isnot legal.`console.log(`string text line 1 string text line 2`);// 字符串中嵌入变量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
- 上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
义。var greeting = `\`Yo\` World!`;
- 模板字符串中嵌入变量,需要将变量名写在
${}
之中。function authorize(user, action) {if (!user.hasPrivilege(action)) {throw new Error(// 传统写法为// 'User '// + user.name// + ' is not authorized to do '// + action// + '.'`User ${user.name} is not authorized to do ${action}.`);} }
大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
var x = 1; var y = 2;`${x} + ${y} = ${x + y}` // "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5"var obj = {x: 1, y: 2}; `${obj.x + obj.y}` // 3
模板字符串之中还能调用函数。
function fn() {return "Hello World"; }`foo ${fn()} bar` // foo Hello World bar
- 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
- String.raw()
String.raw
方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。String.raw`Hi\n${2+3}!`; // "Hi\\n5!"String.raw`Hi\u000A!`; // 'Hi\\u000A!'
- 如果原字符串的斜杠已经转义,那么
String.raw
不会做任何处理。String.raw`Hi\\n` // "Hi\\n"
- 字符的Unicode表示法
- 数组的扩展
- Array.from()
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3 };// ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的
arguments
对象。Array.from
都可以将它们转为真正的数组。// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).forEach(function (p) {console.log(p); });// arguments对象 function foo() {var args = Array.from(arguments);// ... }
上面代码中,
querySelectorAll
方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach
方法。- 只要是部署了Iterator接口的数据结构,
Array.from
都能将其转为数组。Array.from('hello') // ['h', 'e', 'l', 'l', 'o']let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b']
- 扩展运算符(
...
)也可以将某些数据结构转为数组。(不全面)// arguments对象 function foo() {var args = [...arguments]; }// NodeList对象 [...document.querySelectorAll('div')]
扩展运算符背后调用的是遍历器接口(
Symbol.iterator
),如果一个对象没有部署这个接口,就无法转换。Array.from
方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length
属性。因此,任何有length
属性的对象,都可以通过Array.from
方法转为数组,而此时扩展运算符就无法转换。 Array.from
还可以接受第二个参数,作用类似于数组的map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。Array.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x);Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
Array.from()
的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于\uFFFF
的Unicode字符,算作两个字符的bug。function countSymbols(string) {return Array.from(string).length; }
- Array.of()
Array.of
方法用于将一组值,转换为数组。Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
这个方法的主要目的,是弥补数组构造函数
Array()
的不足。因为参数个数的不同,会导致Array()
的行为有差异。Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8]
上面代码中,
Array
方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()
才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。Array.of
基本上可以用来替代Array()
或new Array()
,并且不存在由于参数不同而导致的重载。它的行为非常统一。
- copyWithin()
- 数组实例的
copyWithin
方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。
-
target(必需):从该位置开始替换数据。
-
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
-
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
-
这三个参数都应该是数值,如果不是,会自动转为数值。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。下面是更多例子。
// 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]// -2相当于3号位,-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]// 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5}// 将2号位到数组结束,复制到0号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5]// 对于没有部署TypedArray的copyWithin方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
-
- 数组实例的
- find()和findIndex()
- 数组实例的
find
方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
。[1, 5, 10, 15].find(function(value, index, arr) {return value > 9; }) // 10
上面代码中,
find
方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。 - 数组实例的
findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。[1, 5, 10, 15].findIndex(function(value, index, arr) {return value > 9; }) // 2
- 数组实例的
- fill()
fill
方法使用给定值,填充一个数组。['a', 'b', 'c'].fill(7) // [7, 7, 7]new Array(3).fill(7) // [7, 7, 7]
上面代码表明,
fill
方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。fill
方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
- entries(),keys()和values()
- ES6提供三个新的方法——
entries()
,keys()
和values()
——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of
循环进行遍历,唯一的区别是keys()
是对键名的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历。for (let index of ['a', 'b'].keys()) {console.log(index); } // 0 // 1for (let elem of ['a', 'b'].values()) {console.log(elem); } // 'a' // 'b'for (let [index, elem] of ['a', 'b'].entries()) {console.log(index, elem); } // 0 "a" // 1 "b"
- ES6提供三个新的方法——
- includes()
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似。该方法属于ES7,但Babel转码器已经支持。[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
没有该方法之前,我们通常使用数组的
indexOf
方法,检查是否包含某个值。indexOf
方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相当运算符(===)进行判断,这会导致对NaN
的误判。
- 空位
- 由于空位的处理规则非常不统一,所以建议避免出现空位。
- Array.from()