ES6学习笔记——字符串扩展

Posted 2020-09-25

相信很多人也和我一样，不喜欢这样循规蹈矩的逐条去学习语法，很枯燥乏味。主要是这样学完一遍之后，没过一段时间就忘到九霄云外了。不如实际用到的时候研究它记得牢靠，所以我就整理成笔记，加深记忆的同时便于复习查看。

在这样不断的学习过程中，也提高了自己的总结能力：)

1.字符串的遍历器接口

ES5，数组和对象可以进行遍历，使用for() 和 for...in,还有jq中的each()方法进行遍历。

ES6为我们提供了字符串遍历器  for...of 循环遍历

优点：可以识别大于0xFFFF的码点，传统的for循环是无法识别的。

 for(let i of ‘hello‘){
    console.log(i);  //依次输出‘h’ 、‘e’、‘l’、‘l’、‘o’
 }

2.at()方法

ES5中字符串有charAt()方法，返回字符串给定位置的字符，该方法不能识别码点大于0xFFFF的字符。

‘lemon‘.charAt(0); //‘l‘
‘??‘.charAt(0) // "\uD842"

字符串实例的at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符。

‘lemon‘.at(0); //‘l‘
‘??‘.at(0) // "??"

3.includes()、startsWith()、endsWith()

 ES5，有indexOf()方法，确定某个字符串是否包含在另外一个字符串中。

ES6，又提供三种新的方法：

• includes(str,[place])：返回布尔值，表示是否找到了参数字符串。
• startsWith(str,[place])：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith(str,[place])：返回布尔值，表示参数字符串是否在源字符串的尾部。

这三个方法都支持第二个参数，表示开始搜索的位置。

注意：使用第二个参数n 时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

 var s1 = ‘Hello world!‘;

 s1.startsWith(‘Hello‘) // true
 s1.endsWith(‘!‘) // true
 s1.includes(‘o‘) // true
//-------------------------------
var s2 = ‘happy day!‘;

  console.log(s2.startsWith(‘day‘, 6)); // true，表示从第0个字符开始
  console.log(s2.includes(‘day‘, 6)); // true，表示从第0个字符开始

  console.log(s2.endsWith(‘happy‘, 5)); // true,表示前5个字符

  console.log(s2.includes(‘happy‘, 0)); // true，表示从第0个字符开始

4.repeat()方法

该方法返回一个新字符串，表示将原字符串重复n次。

根据其参数类型分为以下几种：

（1）参数是正整数；

（2）参数是小数，会被取整；

（3）参数是负数或Infinity会报错，如果参数是0到-1之间的小数，则等同于0；

（4）参数是NAN 等同于0;

（5）参数是字符串，则会先转换成数字；

  //1.参数是正整数
  console.log(‘hello‘.repeat(2)) // "hellohello"
  console.log(‘na‘.repeat(0)) // ""
  //2.参数是小数
  console.log(‘na‘.repeat(2.9)) // "nana"
  //3. 参数是Inifinity
  console.log(‘na‘.repeat(Infinity))
  //4. 参数是负数
  // RangeError
  console.log(‘na‘.repeat(-1))
  // RangeError
  //5. 参数是0~-1之间的小数
  console.log(‘na‘.repeat(-0.9)) // ""
  //6. 参数是NAN
  console.log(‘na‘.repeat(NaN)) // ""
  //7. 参数是字符串
  console.log(‘na‘.repeat(‘na‘)) // ""
  console.log(‘na‘.repeat(‘3‘)) // "nanana"

5.padStart()、padEnd()字符串补全长度方法

padStart()用于头部补全，padEnd()用于尾部补全。

padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

这里我们也根据其参数分为以下几种类型：

（1）若原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

（2）若用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

（3）如果省略第二个参数，默认使用空格补全长度。

  //1.正常情况
  console.log(‘x‘.padStart(4, ‘ab‘) )// ‘abax‘
  console.log(‘x‘.padEnd(5, ‘ab‘)) // ‘xabab‘

  // 2.原字符串的长度，等于或大于指定的最小长度
  console.log(‘xxx‘.padStart(2, ‘ab‘)) // ‘xxx‘
  console.log(‘xxx‘.padEnd(2, ‘ab‘)) // ‘xxx‘
  // 3.补全的字符串与原字符串，两者的长度之和超过了指定的最小长度
  console.log(‘abc‘.padStart(10, ‘0123456789‘))// ‘0123456abc‘
  // 4.省略第二个参数
  console.log(‘x‘.padStart(4)) // ‘   x‘
  console.log(‘x‘.padEnd(4)) // ‘x   ‘

padStart的常见用途：

（1）为数值补全指定位数。下面代码生成10位的数值字符串。

（2）提示字符串格式。

//为数值补全指定位数
‘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"

6.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如下：

 var string = `\`Hello\` World!`;
 console.log(string);//`Hello` World!

 

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。若不想要这个换行，可以使用trim方法消除它。

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

模板字符串中嵌入变量，需要将变量名写在${}之中。

大括号内部可以放入任意的javascript表达式，可以进行运算，以及引用对象属性。

var x = 1, y = 2,obj = {x: 1, y: 2};

  console.log(`${x} + ${y} = ${x + y}`);// "1 + 2 = 3"
  console.log(`${x} + ${y * 2} = ${x + y * 2}`);// "1 + 4 = 5"

  console.log(`${obj.x + obj.y}`);// 3

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

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`// foo Hello World bar

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

7.标签模板

8.String.raw()方法

ES6还为原生的String对象，提供了一个raw方法。

用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

String.raw({ raw: ‘test‘ }, 0, 1, 2);
// ‘t0e1s2t‘

// 等同于
String.raw({ raw: [‘t‘,‘e‘,‘s‘,‘t‘] }, 0, 1, 2);

9.模板字符串的限制

标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。

注：此笔记对ES6字符串扩展记录的不完整，这里我只记了一部分新增特性。深入学习戳?http://es6.ruanyifeng.com/#docs/string