ES 6 系列 - 4. 字符串的扩展

[hzzzzzzzq]

字符串的扩展

字符串的遍历

ES6 中添加了字符串的遍历器接口，字符串就可以使用 for...of 来遍历了。

let s = 'Hello'
for (let c of s) {
    console.log(c); // H e l l o
}

JSON.stringify() 和 JSON.parse()

在有时候，我们需要将一个 JSON 格式的数据，转成字符串进行页面传递。 所以这时候采用 JSON.stringify() 进行序列化。然后传递，在目的页面使用 JSON.parse() 转为 JavaScript 对象。在进行大数据传递时，时常需要。

let person = {
    name: 'hzzzzzzzq',
    age: 18,
    height: 1.80,
    weight: 140,
    skills: ['JavaScript'],
};
let s = JSON.stringify(person);
console.log(s);
// {"name":"hzzzzzzzq","age":18,"height":1.8,"weight":140,"skills":["JavaScript"]}

let str = JSON.parse(s);
console.log(str);
// {
//  "name": "hzzzzzzzq",
//  "age": 18,
//  "height": 1.8,
//  "weight": 140,
//  "skills": [
//     "JavaScript"
//   ]
// }

模版字符串

什么是模版字符串呢？简单来说，其实就是加强版的字符串，使用 ( ` )作为标识符 。可以作为普通的字符串使用，也可以用来定义多行字符串，或者在字符串中使用变量。

我们来看看使用普通字符串时 是怎么进行换行，或者加入变量的。

let name = 'hzzzzzzzq';
let age = 18;
let info = 'my name is ' + name  + '\n my age is ' + age;
console.log(info);
// my name is hzzzzzzzq
// my age is 18

然后我们再来看看模版字符串的写法。

let name = 'hzzzzzzzq';
let age = 18;
let info = `my name is ${name}
my age is ${age}`;
console.log(info);
// my name is hzzzzzzzq
// my age is 18

换行，直接就使用回车就可以换行，你输入的样子是怎样的，打印基本上就是怎样的。

变量采用 ${} 来嵌入，也可以直接写入一个字符串中，少写了许多没必要的 + 号。

字符串中的新增方法

在这里就列举一些常用的实例方法

includes()

includes() 实例方法，返回的是一个布尔值（true和false），表示是否找到了参数字符串。 参数二来表示开始搜索的位置。

let s = 'Hello hzzzzzzzq';
console.log(s.includes('Hello')); // true
console.log(s.includes('x')); // false
console.log(s.includes('zzzzzzz')); // true
console.log(s.includes('H', 2)); // false

startsWith()、endsWith()

• startsWith() startsWith() 返回也是布尔值，表示参数是否在原字符串的头部。 第二参数也表示开始搜索的位置。

  let s = 'Hello hzzzzzzzq';
  console.log(s.startsWith('Hello')); // true
  console.log(s.startsWith('e')); // false
  // 表示从 1 开始
  console.log(s.startsWith('Hello', 1)); // false 

• endsWith() endsWith() 返回也是布尔值，表示参数是否在原字符串的尾部。 注意：这里的第二参数表示的是到 n 为止，不像 startsWith() 是从 n 开始到字符串结尾。

  let s = 'Hello hzzzzzzzq';
  console.log(s.endsWith('q')); // true
  console.log(s.endsWith('zzzzq')); // true
  // 表示看前 5 个字符
  console.log(s.endsWith('o', 5)); // true
  // 表示看前 4 个字符
  console.log(s.endsWith('o', 4)); // false

repeat()

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

• 如果传入的是小数，则会往下取整。
• 传入参数不能是 Infinity 和 小于 -1 的值
• 0 到 -1 之间的小数，则按照等同于 0 来计算。
• NaN 会被转为 0
• 参数是字符串则先转为数字，如果不能转为数字，则为 0

let s = 'a';
console.log(s.repeat(4)); // 'aaaa'
console.log(s.repeat(3.6)); // 'aaa'
console.log(s.repeat(-0.6)); // ''
console.log(s.repeat('aaa')); // ''

padStart、padEnd()

两个实例方法，就是用于字符串的补齐。 第一参数表示想要字符串的长度，第二参数表示字符串没达到第一参数时使用参数二字符串进行补齐。

• padStart() 很明显，Start，就是在字符串的头部补全。

let s = 'aaa';
// 如果原长度大于或等于想要补齐长度，则不生效。
console.log(s.padStart(2, 'b')); // aaa
console.log(s.padStart(10, 'b')); // bbbbbbbaaa
// 如果补齐字符串长度大于剩余格数，则会省略后面字符串
console.log(s.padStart(4, 'bcde')); // baaa 
// 如果，第二参数无内容，则使用空格补齐
console.log(s.padStart(4)); // ' aaa'

• padEnd() End 就是在字符串的尾部补全。

let s = 'aaa';
// 如果原长度大于或等于想要补齐长度，则不生效。
console.log(s.padEnd(2, 'b')); // aaa
console.log(s.padEnd(10, 'b')); // aaabbbbbbb
// 如果补齐字符串长度大于剩余格数，则会省略后面字符串
console.log(s.padEnd(4, 'bcde')); // aaab
// 如果，第二参数无内容，则使用空格补齐
console.log(s.padEnd(4)); // 'aaa '

trimStart()、trimEnd()

这两个实例都是用来去除字符串空格用的。

let s = '   x   ';
// start 去除前面空格
console.log(s.trimStart()); // 'x   '
// end 去除后面空格
console.log(s.trimEnd()); // '   x'

replaceAll()

replaceAll() 实例方法是用来替换字符串中的字符用的。

在提到这个之前，我们先看看 replace() ，参数一是被替换的值，参数二是替换值，简单来讲就是，参数二用来替换参数一。

let s = 'abcabc';
console.log(s.replace('a', 'x')); // xbcabc

replace() 只能替代一个，是第一个遇到的。

那我们来看看 replaceAll()，是全部替换。

let s = 'abcabc';
console.log(s.replaceAll('a', 'x')); // xbcxbc

这里是简单的用法，当然在 replaceAll() 第二参数还可以传入一个函数，具体可以看看 MDN的replaceAll()