JS字符串String类型总结

196 阅读2分钟

首先我们看一下字符串实例或者String原型上有什么方法

console.log(String.prototype)

可以得到...

String.proptotype.png

对其中常用的方法(接口进行摘选)

/** 需要说明的是:对字符串或者是任意数据类型接口(数组或者对象等)

*我们在初学阶段的重心是三要素:

*1.是否会修改原值 2.参数(最好有含义)3.返回值和返回值类型

*/

查找字符串

  1. 查找字符串:includes,indexOf,search,match
第一个参数为查找的value 注意用“”或者''包裹

includes(searchvalue,start)返回值是true或者false

indexOf(searchvalue,start)返回值是查找元素第一次出现的位置(索引值),在整个字符串中未找到返回-1

第一个参数为查找的value或者Exp实例 注意用“”或者''包裹

说明:不是Exp实例的会用toString转换,undefined用toString转换会报错,但ES规定填充字符串时undefined会转换为空格(0x0020)

search(exp)注意无第二个参数返回值是查找元素第一次出现的位置(索引值),未找到返回-1

match(exp)注意无第二个参数,只能匹配第一次出现的位置,区别matchAll返回值是一个数组,可以通过[].index得到结果,以'foooa'.match(/oa/,0)为例

返回['oa', index: 3, input: 'foooa', groups: undefined]

对于数组内的groups分组暂时还没有用到,需要注意,笔者会再以后进行补充 例如

var string = "foooa",
expr = /oa/;
string.search(expr)
//返回值是3
var string = "foooa",
string.search('oa')
//返回值是3
------------------------------------------------------------
var string = "foooa",
expr = /oa/g;
string.match('oa')
//返回值是['oa', index: 3, input: 'foooa', groups: undefined]
//传字符串也是一样
var string = "foooaoaoaoa",
expr = /oa/g;
string.match(expr)
// ['oa', 'oa', 'oa', 'oa']
exp = /oa/g
string.matchAll(expr)
//string.matchAll(expr)中的expr必须是全局匹配即包含g,否则会报TypeError的错误

拓展正则实例的方法匹配字符串

reg.test('string')返回值为truefalse
reg.exec('string')返回值为一个数组同'string'.match('value')

//总结查找字符串有字符串实例的方法和正则的方法
    //对于字符串实例
    查找是否包含是否includes(),返回值为truefalse
    查找字符串位置的有indexOf(value,start),返回值为索引值或者-1
                     search(valueorexp),返回值为索引值或-1
                     match(valueorexp),返回值为数组类似['oa', index: 3, input: 'foooa', groups: undefined]形式
    //对于正则实例
    /foo*/.test('table football')
    //true   *代表匹配0或者n次,+代表1或者n次(n为正)
    /foo*/.exec('table football')
    //['foo', index: 6, input: 'table football', groups: undefined]               

补位和去空格

//补位
    padStart(maxlength,padvalue)
    padEnd(maxlength,padvalue)
    //无padleft和padEnd()
    用于label的左右对齐
     //应用
         //对齐
        console.log('JavaScript'.padStart(15));
        console.log('HTML'.padStart(15));
        console.log('CSS'.padStart(15));
        console.log('Vue'.padStart(15));
        // expected output:
        JavaScript
              HTML
               CSS
               Vue
        //敏感数字打码
        const phoneNumber = '139 1234 5678';
        const last4Digits = phoneNumber.slice(-4);
        last4Digits.padStart(phoneNumber.length, '*');
// expected output:********* 5678
//去空格
    trim() trimLeft() trimStart() trimRight trimEnd()

---------------------------------2022/5/19 18:05-----------------------------------------