写点什么

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

用户头像
华强
关注
发布于: 2021 年 07 月 23 日
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 只有一个字符,但是for循环会认为它包含两个字符(都不可打印),而for...of循环会正确识别出这一个字符。


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


function is32Bit(c) {  return c.codePointAt(0) > 0xFFFF;}is32Bit("?") // trueis32Bit("a") // false
复制代码

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

'\u01D1'==='\u004F\u030C' //false'\u01D1'.length // 1'\u004F\u030C'.length // 2
复制代码


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


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


'\u01D1'.normalize() === '\u004F\u030C'.normalize()// true
复制代码

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

let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true
复制代码


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


let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false
复制代码


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

四、字符串重复

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


'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""
复制代码

五、字符串补全

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


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


'abc'.padStart(10, '0123456789')// '0123456abc'
复制代码


padStart常见用途是为数值补全指定位数。下面代码生成 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) 
复制代码


用法:


  1. substring(start,end) 用数学表达式表达区间的话就是截取[start,end);

  2. substring(start) 没有 end 相当于[start,最后一个字符];


let str = 'Hello world';let use1 = str.substring(0, 3);console.log(use1); // Hellet use2 = str.substring(3,0);console.log(use2); // hellet use3 = str.substring(2);console.log(use3); // llo world
复制代码

6.2 slice()

slice(start,end) 
复制代码


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


  1. slice(start,end) -> start不能大于end,否则返回空字符串;

  2. slice可以接受参数是负数,如果是负数的话,规则将按照:字符串的长度和赋值相加,替换掉这个值。举例如下:


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

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

substr(start,length) 
复制代码


用法:


  1. substr(start,length) -> 截取的字符串区间为:[start,start+length)->从start开始,算上startlength个字符串;

  2. substr(start) -> 截取的字符串区间为:[start,最后一个字符]


let str = 'Hello world';console.log(str.substr(1,2)) // elconsole.log(str.substr(3)) // lo world
复制代码


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


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


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

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


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


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


  • charAt(index)返回index位置的字符;

  • charCodeAt(index)返回index位置的字符Unicode码;

  • charAt(index)不能识别大于0xFFFF的字符,这时候可以用at()来识别;


var str = 'abc'str.charAt(0) // astr.charCodeAt(0) // 97
复制代码

八、数组转字符串

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

九、字符串转数组

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

十、拓展阅读

发布于: 2021 年 07 月 23 日阅读数: 5
用户头像

华强

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

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