Vue进阶（五十八）：ES字符串操作：遍历、比较、截取、补全...

1.字符串的遍历器接口

let text = String.fromCodePoint(0x20BB7);
 
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "
 
for (let i of text) {
  console.log(i);
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

上面代码中，字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for...of循环会正确识别出这一个字符。

codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

2.合成字符串比较法 normalize()

 '\u01D1'==='\u004F\u030C' //false '\u01D1'.length // 1 '\u004F\u030C'.length // 2

  

 

  
1
  
2
  
3
  
4
 

上面代码表示，JavaScript 将合成字符视为两个字符，导致两种表示方法不相等。

ES6 提供字符串实例的normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。

 '\u01D1'.normalize() === '\u004F\u030C'.normalize() // true

  

 

  
1
  
2
 

3.确定一个字符串是否包含在另一个字符串中

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

  

 

  
1
  
2
  
3
  
4
  
5
 

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

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

  

 

  
1
  
2
  
3
  
4
  
5
 

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

4.重复字符串

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

 'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""

  

 

  
1
  
2
  
3
 

5.补全字符串

如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

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

 'abc'.padStart(10, '0123456789') // '0123456abc'

  

 

  
1
  
2
 

padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

 '1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"

  

 

  
1
  
2
  
3
 

另一个用途是提示字符串格式。

 '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

  

 

  
1
  
2
 

6.截取字符串

substring(start,end) 

  

 

  
1
 

用法：

1. substring(start,end) 用数学表达式表达区间的话就是截取[start,end);
2. substring(start) 没有end相当于[start,最后一个字符]

let str = 'Hello world';
let use1 = str.substring(0, 3);
console.log(use1); // Hel
let use2 = str.substring(3,0);
console.log(use2); // hel
let use3 = str.substring(2);
console.log(use3); // llo world

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

7. 截取指定位置和指定长度的字符串

substr(start,length) 

  

 

  
1
 

用法：

1. substr(start,length) -> 截取的字符串区间为：[start,start+length)->从start开始，算上start数length个字符串;
2. substr(start) -> 截取的字符串区间为：[start,最后一个字符]

  let str = 'Hello world';
  console.log(str.substr(1,2)) // el
  console.log(str.substr(3)) // lo world

  

 

  
1
  
2
  
3
 

indexOf(char,index) 和 lastIndexOf(char,index)

1. char:是你要找的那个字符，index:是从哪个字符的位置序号开始找(没有则在indexOf中是最左边的字符，在lastIndexOf中是最右边的字符)；
2. indexOf是从左往右搜索，而lastIndexOf是从右往左搜索；
3. 它们的返回值都是搜到char所在的位置序号，如果没搜到，返回-1；
4. 如果index为负数，那么在indexOf和lastIndexOf方法中，-1代表的是最后一个字符

  let str = 'good';
  console.log(str.indexOf('o')); // 1
  console.log(str.lastIndexOf('o')); // 2

  

 

  
1
  
2
  
3
 

charAt(index) 和 charCodeAt(index) 和at(index) (es6属性)

• charAt(index)返回index位置的字符
• charCodeAt(index)返回index位置的字符Unicode码
• charAt(index)不能识别大于0xFFFF的字符，这时候可以用at()来识别

  var str = 'abc'
  str.charAt(0) // a
  str.charCodeAt(0) // 97

  

 

  
1
  
2
  
3
 

8.截取字符串

slice(start,end) 

  

 

  
1
 

用法：
slice的用法和substring的用法基本一样，只是区别在于：

1. slice(start,end) -> start是不能大于end的，否则返回空字符串；
2. slice可以接受参数是负数，如果是负数的话，规则将按照：字符串的长度和赋值相加，替换掉这个值。举例如下：

let str = 'abcdefg' // length = 7
str.slice(1,-4) // bc  -> str.slice(1,7-4) -> str.slice(1,3)

  

 

  
1
  
2
 

9.数组转字符串

datas.join(',') //变成字符串后，以逗号分隔

  

 

  
1
 

10.字符串转数组

data.split(',') //字符串按逗号分隔成数组

  

 

  
1
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/93521285