字符的Unicode表示法
ES6加强了对Unicode的支持,允许采用\uxxx形式表示一个字符(突然想起了字体图标)其中xxx就是字符的Unicode码点,但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符,超出这个范围的字符,就必须用两个双字节的形式表示
字符串的遍历
ES6,使得字符串可以被for...of循环遍历
1 for (let codePoint of 'foo') {
2 console.log(codePoint)
3 }
4 // "f"
5 // "o"
6 // "o"
字符串模板(常用)
字符串模板是增强版的字符串,用反引号(``)标识,他可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中使用变量
1 // 普通字符串
2 `In JavaScript '\n' is a line-feed.`
3
4 // 多行字符串
5 `In JavaScript this is
6 not legal.`
7
8 console.log(`string text line 1
9 string text line 2`);
10
11 // 字符串中嵌入变量
12 let name = "Bob", time = "today";
13 `Hello ${name}, how are you ${time}?`
注意:
1,如果在字符串模板中需要使用反引号,则前面要用反斜杠转义
2,如果使用字符串模板表示多行字符串,所有空格和缩进都会保留在输出之中,如果不想要换行的话,可以使用trim()方法来消除它
1 let str = `
2 <ul>
3 <li>first</li>
4 <li>second</li>
5 </ul>
6 `
7 str = str.trim()
3, 在字符串模板中嵌入变量,需要将变量名写在${}之中,大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性;
1 let x = 1;
2 let y = 2;
3
4 `${x} + ${y} = ${x + y}`
5 // "1 + 2 = 3"
6
7 `${x} + ${y * 2} = ${x + y * 2}`
8 // "1 + 4 = 5"
9
10 let obj = {x: 1, y: 2};
11 `${obj.x + obj.y}`
12 // "3"
4,字符串模板中还能调用函数,函数一定要有返回值,否则返回值为undefined
1 function fn() {
2 return "Hello World";
3 }
4
5 `foo ${fn()} bar`
6 // foo Hello World bar,如果函数没有return,则为 "foo undefined bar"
5,如果大括号的值不是字符串,将按照一般的规则转成字符串,如果,大括号是一个对象的话,将默认调用对象的toString方法,如果字符串模板中的变量没有声明,那么将会报错;
6, 字符串模板之中甚至还可以嵌入另一个字符串模板
1 const tmpl = addrs => `
2 <table>
3 ${addrs.map(addr => `
4 <tr><td>${addr.first}</td></tr>
5 <tr><td>${addr.last}</td></tr>
6 `).join('')}
7 </table>
8 `;
字符串新增的方法
String.fromCodePoint()
ES5 提供String.fromCharCode()方法,用于从Unicode码点返回对应的字符,但是这个方法不能识别大于0xFFFF的字符,ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足
String.raw()
该方法返回一个斜杠都被转义的字符串,一般会用在字符串模板的处理,个人理解:可以充当对字符串进行字符串模板形式的处理;但是这种处理方法会将斜杠"\"进行转义;
1 String.raw`Hi\\n`
2 // 返回 "Hi\\\\n"
3
4 String.raw`Hi\\n` === "Hi\\\\n" // true
String.raw()方法本质上是一个正常的函数,只是专门用于字符串模板的标签函数,如果写成函数形式,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组,对应模板字符串解析后的值,它的代码实现基本情况如下:
1 String.raw = function (strings, ...values) {
2 let output = '';
3 let index;
4 for (index = 0; index < values.length; index++) {
5 output += strings.raw[index] + values[index];
6 }
7
8 output += strings.raw[index]
9 return output;
10 }
例:
1 // `foo${1 + 2}bar`
2 // 等同于
3 String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"
MDN示例:
1 String.raw`Hi\n${2+3}!`;
2 // 'Hi\n5!',Hi 后面的字符不是换行符,\ 和 n 是两个不同的字符
3
4 String.raw `Hi\u000A!`;
5 // "Hi\u000A!",同上,这里得到的会是 \、u、0、0、0、A 6个字符,
6 // 任何类型的转义形式都会失效,保留原样输出,不信你试试.length
7
8 let name = "Bob";
9 String.raw `Hi\n${name}!`;
10 // "Hi\nBob!",内插表达式还可以正常运行
11
12
13 // 正常情况下,你也许不需要将 String.raw() 当作函数调用。
14 // 但是为了模拟 `t${0}e${1}s${2}t` 你可以这样做:
15 String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
16 // 注意这个测试, 传入一个 string, 和一个类似数组的对象
17 // 下面这个函数和 `foo${2 + 3}bar${'Java' + 'Script'}baz` 是相等的.
18 String.raw({
19 raw: ['foo', 'bar', 'baz']
20 }, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'
实例方法:codePointAt(), 该方法能够正确处理4个字节储存的字符,返回一个字符的码点;它的参数是字符串中的位置(从0开始)
1 let s = 'a';
2
3 s.codePointAt(0) // 134071
4 s.codePointAt(1) // 57271
5
6 s.codePointAt(2) // 97
实例方法: normalize(), 在许多欧洲语言有语调符号和重音符号,ES6提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,称为Unicode正规化
实例方法: includes(), startsWith(),endsWith(), 常用; 传统上,JavaScript只用indexOf方法,可以用来确定一个字符串是否包含另一个字符串,但是ES6有提供了以上三种方法;
- includes(): 返回布尔值,表示是否找到参数字符串;
- startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部;
- endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部;
1 let s = 'Hello world!';
2
3 s.startsWith('Hello') // true
4 s.endsWith('!') // true
5 s.includes('o') // true
6
7 //这三个方法都支持第二个参数,表示开始搜索的位置。
8
9 let s = 'Hello world!';
10
11 s.startsWith('world', 6) // true
12 s.endsWith('Hello', 5) // true
13 s.includes('Hello', 6) // false
上面代码在使用第二个参数n时,endsWith的行为与其他两个方法有所不同,他针对前n个字符,而其他两个方法针对从第n个位置知道字符串结束;
实例方法: 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,repeat会视同为0
'na'.repeat(-0.9) // ""
// 参数为NaN的时候等同于0
'na'.repeat(NaN) // ""
// 如果repeat的参数是字符串,则会先转换成数字
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
实例方法: padStart(),头部补全, padEnd()尾部补全
这两种方法一共接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串
1 'x'.padStart(5, 'ab') // 'ababx'
2 'x'.padStart(4, 'ab') // 'abax'
3
4 'x'.padEnd(5, 'ab') // 'xabab'
5 'x'.padEnd(4, 'ab') // 'xaba'
1 // 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串
2 'xxx'.padStart(2, 'ab') // 'xxx'
3 'xxx'.padEnd(2, 'ab') // 'xxx'
4
5 // 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截取超出位数的补全字符串
6 'abc'.padStart(10, '0123456789')
7 // '0123456abc'
8
9 // 如果省略第二个参数,默认使用空格补全长度
10 'x'.padStart(4) // ' x'
11 'x'.padEnd(4) // 'x '
12
13 // padStart()的常见用途是为了数值补全指定位数,下面代码生成10位的数值字符串
14 '1'.padStart(10, '0') // "0000000001"
15 '12'.padStart(10, '0') // "0000000012"
16 '123456'.padStart(10, '0') // "0000123456"
17
18 // 另一个用途是提示字符串格式 (利用超出被截取的规则)
19 '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
20 '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
实例方法: trimStart()消除字符串头部空格, trimEnd()消除尾部空格,他们返回的都是新的字符串,不会修改原始字符串
1 const s = ' abc ';
2
3 s.trim() // "abc"
4 s.trimStart() // "abc "
5 s.trimEnd() // " abc"
从上面的代码中可以看出,trimStart()只消除了头部的空格,trimEnd()也是类似行为,除了空格键这两个方法对字符串头部或尾部的tab符,换行符等不可见空白符号也是有效的;另外trimLeft()是trimStart()的别名,trimRight() 是trimEnd()的别名;
实例方法: matchAll()
matchAll()方法返回一个正则表达式在当前字符串的所有匹配;
———— 不生产代码,只是代码的搬用工