Bootstrap

Vue进阶(五十八):ES字符串操作:遍历、比较、截取、补全...

一、字符串遍历器接口

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);
}

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

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

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

二、字符串合成比较法 normalize()

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

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

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

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

三、判断字符串是否包含另一个字符串

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

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

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

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

四、字符串重复

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

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

五、字符串补全

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

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

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

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

'1'.padStart(10, '0') // "0000000001"
'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.1 substring()

substring(start,end) 

用法:

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

6.2 slice()

slice(start,end) 

用法和的用法基本一样,只是区别在于:

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

七、 截取指定位置和指定长度的字符串

substr(start,length) 

用法:

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

是从左往右搜索,而是从右往左搜索; 它们的返回值都是搜到char所在的位置序号,如果没搜到,返回-1;如果为负数,那么在和中,-1代表最后一个字符。

  • :为要查找的那个字符;

  • :是从哪个字符的位置序号开始找(没有则在中是最左边的字符,在中是最右边的字符);

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

和 和 (es6属性)

  • 返回位置的字符;

  • 返回位置的字符;

  • 不能识别大于的字符,这时候可以用来识别;

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

八、数组转字符串

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

九、字符串转数组

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

十、拓展阅读