es6学习笔记（四）

es6学习笔记(四)

字符串的扩展

Unicode 表示法

• 在表示四个字节的字符时，ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符

  "\u{20BB7}"
  // "?"
  
  "\u{41}\u{42}\u{43}"
  // "ABC"
  
  '\u{1F680}' === '\uD83D\uDE80'
  // true
  

• codePointAt() 能够正确处理 4 个字节储存的字符，返回一个字符的码点

  let s = '?a';
  
  s.codePointAt(0).toString(16) // "20bb7"
  s.codePointAt(2).toString(16) // "61"
  
  //你可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符。
  for (let ch of s) {
   console.log(ch.codePointAt(0).toString(16));
  }
  

• String.fromCodePoint()用于从码点返回对应字符，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足

遍历器接口

• ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历，可以识别大于0xFFFF的码点

  let text = String.fromCodePoint(0x20BB7);
  //传统的for..of..无法识别四个字节的字符
  for (let i = 0; i < text.length; i++) {
    console.log(text[i]);
  }
  // " "
  // " "
  
  for (let i of text) {
    console.log(i);
  }
  // "?"
  

模板字符串

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

  // 普通字符串
 `In JavaScript '\n' is a line-feed.`
 
 // 多行字符串
 `In JavaScript this is
  not legal.`
 
 console.log(`string text line 1
 string text line 2`);
 
 // 字符串中嵌入变量
 let name = "Bob", time = "today";
 `Hello ${name}, how are you ${time}?`

1. 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义
2. 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中
3. 所有模板字符串的空格和换行，都是被保留的，如果你不想要这个换行，可以使用trim方法消除它。

   	$('#list').html(`
   	<ul>
   	   <li>fist</li>
   	   <li>second</li>
       </ul>
       `.trim());
    ```
   

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

标签模版

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

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

let user={
	name:'carol',
	info:'hello World!'
}
console.log(fn`I am ${user.name},${user.info}`);
//I am ,,,carolhello World!

function fn(s,v1,v2){
// 	console.log(s,v1,v2);
	return s+v1+v2
}

新增方法（10种）

• includes()：返回布尔值，表示是否找到了参数字符串
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

  let s = 'Hello world!';
  
  s.startsWith('Hello') //true
  s.endWith('!') //true
  s.includes('o') //true
  
    //这三个方法都支持第二个参数，表示开始搜索的位置
    //使用第二个参数n时,endsWith对前n个字符,其他两个方法针对从第n个位置直到字符串结束
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false
  

• 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
  'na'.repeat(-0.9) // ""
  
  //参数NaN等同于 0。
  'na'.repeat(NaN) // ""
  
  //如果repeat的参数是字符串，则会先转换成数字。
  'na'.repeat('na') // ""
  'na'.repeat('3') // "nanana"
  

• 字符串补全长度的功能

1. padStart()用于头部补全
2. padEnd()用于尾部补全

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