本文共 4551 字，大约阅读时间需要 15 分钟。

1.字符的Unicode表示法

JavaScript允许采用\uxxxx表示一个字符，xxxx是这个字符的Unicode码。

"\u0061"//"a"

这种表示法只能表示\u0000~\uFFFF之间的字符， 超出这个范围的字符必须用双字节的形式表示。

"\uD842\uDFB7"// "��""\u20BB7"// " 7"

上面代码中，如果直接在\u后面加超过0xFFFF的数值（20BB7），JavaScript会理解成\u20BB+7，\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7。

ES6中做出了改进，只要将码点放入大括号中，就能正确解读该字符。

"\u{20BB7}"// "��"

2.codePointAt（）

JavaScript内部，字符以utf-16的格式存储，每个字符固定为2个字节，对于那些需要四个字节存储的字符（Unicode码点大于0xFFFF）,JavaScript会认为它们是2个字符。

var s = "��";s.length // 2s.charAt(0) // ''s.charAt(1) // ''s.charCodeAt(0) // 55362s.charCodeAt(1) // 57271

ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

let s = '��a';s.codePointAt(0) // 134071s.codePointAt(1) // 57271s.codePointAt(2) // 97

可以用for…of循环遍历一个字符串，并且可以正确识别32位的utf-16字符。

let s = '��a';for (let ch of s) {  console.log(ch.codePointAt(0).toString(16));}// 20bb7// 61

codePointAt（）方法可以用于判断一个字符是由2个字节还是4个字节组成。

function is32Bit(c) {
     return c.codePointAt(0) > 0xFFFF;}is32Bit("��") // trueis32Bit("a") // false

3.fromCodePoint（）

String.fromCharCode（）可以根据码点返回对应的字符，但是不能识别32位的utf-16字符，ES6提供String.fromCodePoint（）方法，可以正确识别32位的utf-16字符。

String.fromCharCode(0x20BB7)// "ஷ"  String.fromCharCode不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。String.fromCodePoint(0x20BB7)// "��"

4.at()

ES5对字符串对象提供charAt()方法，返回字符串指定位置的字符。这个方法不能识别码点大于0xFFFF的字符。ES6提供at()方法，可以正确识别 Unicode大于0xFFFF的字符。

'abc'.charAt(0) // "a"'��'.charAt(0) // "\uD842"'abc'.at(0) // "a"'��'.at(0) // "��"

5.includes(),startsWith(),endsWith()

let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true

这三个方法都可以设置第二个参数

let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false

startsWidth，includes的第二个参数表示从第n个字符开始直到字符串结束。endsWidth的第二个参数表示从第0个字符开始直到n-1个字符。

6.repeat() repeat()返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""//参数是小数会被取整'na'.repeat(2.9) // "nana"//参数是负数或者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) // ""//参数是字符串会先转化成数字'na'.repeat('na') // ""'na'.repeat('3') // "nanana

7.padStart(),padEnd()

ES2017引入了字符串补全长度的方法。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx//如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串'xxx'.padStart(2, 'ab') // 'xxx'//如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。'abc'.padStart(10, '0123456789')// '0123456abc'//如果省略第二个参数，默认使用空格补全长度。'x'.padStart(4) // '   x''x'.padEnd(4) // 'x   '

8.模板字符串

模板字符串是增强版的字符串，用反引号（`）。可以当作普通字符串使用，也可以定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串`In JavaScript '\n' is a line-feed.`// 多行字符串`In JavaScript this is not legal.`// 字符串中嵌入变量let name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`//如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
   
  
    
first
  
    
second
   
`);//如果你不想要保留，可以使用trim方法消除它。$('#list').html(`
   
  
    
first
  
    
second
   
`).trim();

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;let y = 2;`${x} + ${y} = ${x + y}`// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`// "1 + 4 = 5"let obj = {x: 1, y: 2};`${obj.x + obj.y}`// "3"

模板字符串之中还能调用函数。

function fn() {  return "Hello World";}`foo ${
  fn()} bar`// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明let msg = `Hello, ${place}`;// 报错

如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`// "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `  
   
      ${addrs.map(addr => `    
  `).join('')}  
    
     
      
${addr.first}
     
         
      
${addr.last}
     
    
   
`;const data = [    { first: '
   
    ', last: 'Bond' },    { first: 'Lars', last: '
    
     ' },];console.log(tmpl(data));// 
     
      ////   
//   
////   
//   
//// 
      
       
        
         
       
       
        
Bond
       
       
        
Lars
       
       
        
         
       
      
     
    
   

9.标签模板

模板字符串紧跟在一个函数后面，该函数将被调用来处理这个模板字符串，这就是“标签模板的功能”。标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`123`// 等同于alert(123)

如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;let b = 10;tag`Hello ${ a + b } world ${ a * b }`;// 等同于tag(['Hello ', ' world ', ''], 15, 50);

函数tag依次会接收到多个参数。

function tag(stringArr, value1, value2){  // ...}// 等同于function tag(stringArr, ...values){  // ...}

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

参考：

转载地址：http://prarb.baihongyu.com/