字符串String的API

Posted 2021-01-12 shaokevin

 

字符串的理解
1. 字符串的属性
str.length
2. 字符串的方法
charAt()
charCodeAt()
indexOf()
lastIndexOf()
slice()
substring()
substr()
includes()
startsWidth()
endsWidh()
toLowerCase()
toUpperCase()
trim()
splite()

内容

1. 字符串的属性
str.length。长度，字符串中字符的个数

2. 字符串的方法：
关注：名称、参数、返回值
2.1 charAt()
理解：从一个字符串中返回指定的字符.
使用：str.charAt(index)
参数：index : 一个介于0和字符串长度减1之间的整数。 (0~length-1)，如果没有提供索引，charAt() 将使用0。
返回值：String字符，字符串中对应位置上的字符，没有就是undefined
原字符串：不变

2.2 charCodeAt()
理解：从一个字符串中返回指定的字符在Unicode中的编码。
使用：str.charCodeAt(index)
参数：index : 一个介于0和字符串长度减1之间的整数。 (0~length-1)，如果没有提供索引，charCodeAt() 将使用0。
返回值：Number，数字，该字符对应的Unicode编码
原字符串：不变

    let str1 = ‘abc‘;
    let res1 = str1.charAt(2);
    let res2 = str1.charCodeAt(0);
    console.log(res1);             //c
    console.log(res2);             //97

View Code

 

2.3 indexOf()，lastIndexOf()
理解：一个字符在一个字符串的位置
使用：str.indexOf(str，num)，str.lastIndexOf(str，num)
参数：传入一个字符，第二个参数是指从第几个字符开始
返回值：Number (0~length-1)，不存在就返回-1
原字符串：不变

    let str1 = ‘abca‘;
    let res1 = str1.indexOf(‘a‘);
    let res2 = str1.lastIndexOf(‘a‘);
    console.log(res1);             //0
    console.log(res2);             //3

View Code

 

2.4 slice()
理解：从字符串中截取字符
使用：str.slice()，str.slice(num)，str.slice(num1,num2)
参数：没有参数，从0开始截取；
    一个参数，从num开始截取到最后
    两个参数，从num1开始截取到num2，包括num1，不包括num2
    参数可以是负数，length+负数
    参数是顺序，后面小于前面就不截取
返回值：截取的字符
原字符串：不变

 //注意：第一个参数包含，第二个参数不包含；支持负数，负数会转化成0；不支持倒序，将小的数放在前面
    let str1 = ‘012345‘;
    let res1 = str1.slice();      //没有参数
    let res2 = str1.slice(2);  //一个参数
    let res3 = str1.slice(1,2);      //两个参数，第一中情况，第一个参数比第二个参数大
    let res4 = str1.slice(2,1);  //两个参数，第二中情况，第一个参数比第二个参数小
    let res5 = str1.slice(2,-1);  //两个参数，第二中情况，参数是负数

    console.log(‘原字符串‘,str1);   //012345
    console.log(res1);             //012345
    console.log(res2);             //2345
    console.log(res3);             //1
    console.log(res4);             //
    console.log(res5);             //234

View Code

 

2.5 substring()
理解：从字符串中截取字符
使用：str.substring()，str.substring(num)，str.substring(num1,num2)
参数：没有参数，从0开始截取；
    一个参数，从num开始截取到最后
    两个参数，从num1开始截取到num2，包括num1，不包括num2
    参数不可以是负数，就从0开始
    参数是可以顺序可以倒序，后面小于前面，两个数字就倒一下，再截取
返回值：截取的字符
原字符串：不变

//注意：第一个参数包含，第二个参数不包含；不支持负数，负数会转化成0；支持倒序，将小的数放在前面
    let str1 = ‘012345‘;
    let res1 = str1.substring();      //没有参数
    let res2 = str1.substring(2);  //一个参数
    let res3 = str1.substring(1,2);      //两个参数，第一中情况，第一个参数比第二个参数大
    let res4 = str1.substring(2,1);  //两个参数，第二中情况，第一个参数比第二个参数小
    let res5 = str1.substring(2,-1);  //两个参数，第二中情况，参数是负数

    console.log(‘原字符串‘,str1);   //012345
    console.log(res1);             //012345
    console.log(res2);             //2345
    console.log(res3);             //1
    console.log(res4);             //1-------
    console.log(res5);             //01-------

View Code

 

2.6 substr()
理解：从字符串中截取字符
使用：str.substr(index,length)
参数：从第index开始截取长度为length的字符
返回值：截取的字符
原字符串：不变

//注意：第一个参数包含，第二个参数不包含；支持负数，负数会转化成0；支持倒序，将小的数放在前面
    let str1 = ‘012345‘;
    let res1 = str1.substr();      //没有参数
    let res2 = str1.substr(2);  //一个参数
    let res3 = str1.substr(1,2);      //两个参数，第一中情况，第一个参数比第二个参数大
    let res4 = str1.substr(2,1);  //两个参数，第二中情况，第一个参数比第二个参数小
    let res5 = str1.substr(-2,1);  //两个参数，第二中情况，参数是负数

    console.log(‘原字符串‘,str1);   //01234
    console.log(res1);             //01234
    console.log(res2);             //2345
    console.log(res3);             //12
    console.log(res4);             //2
    console.log(res5);             //4

View Code

 

2.7 includes()
理解：字符串中是否包含某个字符
使用：str.includes(str)
参数：某个字符
返回值：true/false
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.includes(‘4‘);
    let res2 = str1.includes(‘9‘);

    console.log(res1);             //true
    console.log(res2);             //false

View Code

 

2.8 startsWidth()，endsWidh()
理解：字符串是否已某个或某串字符开始/结束
使用：str.startsWidth(str),str.endsWidh(str)
参数：某个字符
返回值：true/false
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.startsWith(‘0‘);
    let res2 = str1.startsWith(‘01‘);
    let res3 = str1.startsWith(‘2‘);

    console.log(res1);             //true
    console.log(res2);             //true
    console.log(res3);             //false

View Code

    let str1 = ‘012345‘;
    let res1 = str1.endsWith(‘5‘);
    let res2 = str1.endsWith(‘45‘);
    let res3 = str1.endsWith(‘2‘);

    console.log(res1);             //true
    console.log(res2);             //true
    console.log(res3);             //false

View Code

 

2.9 toLowerCase()，toUpperCase()
理解：将字符串转出小写/大写
使用：str.toLowerCase(),str.toUpperCase()
参数：没有参数
返回值：字符串
原字符串：不变

    let str1 = ‘ABC‘;
    let res1 = str1.toLowerCase(str1);

    console.log(‘元素字符串‘,str1);             //ABC
    console.log(res1);                 //abc



    let str2 = ‘abcd‘;
    let res2 = str1.toUpperCase(str1);

    console.log(‘元素字符串‘,str2);             //abc
    console.log(res2);                 //ABC

View Code

 

2.10 trim()
理解：将字符串前面和后面的空格去掉
使用：str.trim()
参数：没有参数
返回值：字符串
原字符串：不变

    let str1 = ‘ 012345 ‘;
    let res1 = str1.trim();

    console.log(‘原字符串‘,‘vv‘+str1+‘vv‘);             //vv 012345 vv
    console.log(‘vv‘+res1+‘vv‘);             //vv012345vv

View Code

 

2.11 concat()
理解：合并字符串
使用：str.concat()
参数：没有参数
返回值：合并之后的字符串
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.concat(‘abc‘);

    console.log(‘原字符串‘,str1);   //012345
    console.log(res1);             //012345abc

View Code

 

2.12 split()
理解：合并字符串
使用：str.split()
参数：没有参数
返回值：转换之后的数组
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.split(‘‘);

    console.log(‘原字符串‘,str1);   //012345
    console.log(res1);             //["0", "1", "2", "3", "4", "5"]

View Code

 

2.13 padStart()
理解：合并字符串
使用：str.padStart(),str.padStart(1),str.padStart(1,‘a‘)
参数：没有参数,第一个参数是数字，第二个参数是字符串
返回值：往字符串最前面添加字符
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.padStart(‘2‘); //一个参数，数字比位数小
    let res2 = str1.padStart(‘8‘); //一个参数，数字比位数大，没有第二个参数用空格填充
    let res3 = str1.padStart(‘7‘,‘a‘);

    console.log(res1);             //012345
    console.log(‘vv‘+res2);             //vv  012345
    console.log(res3);             //a012345

View Code

 

2.14 padEnd()
理解：合并字符串
使用：str.padEnd(),str.padEnd(1),str.padEnd(1,‘a‘)
参数：没有参数,第一个参数是数字，第二个参数是字符串
返回值：往字符串最后面添加字符
原字符串：不变

    let str1 = ‘012345‘;
    let res1 = str1.padEnd(‘2‘); //一个参数，数字比位数小
    let res2 = str1.padEnd(‘8‘); //一个参数，数字比位数大，没有第二个参数用空格填充
    let res3 = str1.padEnd(‘7‘,‘a‘);

    console.log(res1);             //012345
    console.log(res2+‘vv‘);             //012345  vv
    console.log(res3);             //012345a

View Code

 

————————

2.15 regexp.test(str)：
用法：正则/.test(字符串)
作用：检测字符串中是否存在正则所匹配的内容
返回值：存在返回true，否则返回false

// test---QQ号码校验
    let str1 = ‘a33345‘;
    let str2 = ‘323a222‘;
    let str3 = ‘22222344‘;
    let reg = /^[1-9]d{4,10}$/;

    let res1 = reg.test(str1);
    let res2 = reg.test(str2);
    let res3 = reg.test(str3);

    console.log(res1);             //false
    console.log(res2);             //false
    console.log(res3);             //true

View Code

// test---手机号码校验
    let str1 = ‘a33345‘;
    let str2 = ‘23333‘;
    let str3 = ‘13333‘;
    let str4 = ‘12234432123‘;
    let reg = /^[1-9]d{10}$/;

    let res1 = reg.test(str1);
    let res2 = reg.test(str2);
    let res3 = reg.test(str3);
    let res4 = reg.test(str4);

    console.log(res1);             //false
    console.log(res2);             //false
    console.log(res3);             //false
    console.log(res4);             //true

View Code

2.16 str.match()：
用法：字符串.match(正则/字符串)
作用：在字符串中查找参数所匹配的内容，并把内容保存在一个数组中返回
参数：正则/字符串
返回值：数组
注意：全局和懒惰模式下的区别

    let str1 = ‘ma1ddddma2ggggma3‘;
    let res1 = str1.match(‘ma‘); //参数是字符串
    let res2 = str1.match(/mad/); //参数是正则
    let res3 = str1.match(/mad/g); //参数是正则
    let res4 = str1.match(4); //参数是正则

    console.log(res1);             //["ma", index: 0, input: "ma1ddddma2ggggma3", groups: undefined]
    console.log(res2);             //["ma1", index: 0, input: "ma1ddddma2ggggma3", groups: undefined]
    console.log(res3);             //["ma1", "ma2", "ma3"]
    console.log(res4);             //null

View Code

 

2.17 str.search()：
用法：字符串.search(正则/字符串)
作用：在字符串中搜索参数中所匹配的内容首次出现的位置
参数：正则/字符串
返回值：返回位置，没有-1
注意：和indexOf的区别
indexOf不支持正则
search支持正则

    let str1 = ‘ma1ddddma2ggg2gma3‘;
    let res1 = str1.search(‘2‘); //参数是字符串
    let res2 = str1.search(/d/); //参数是正则
    let res3 = str1.search(/d/g); //参数是正则
    let res4 = str1.search(4); //参数是正则

    console.log(res1);             //9
    console.log(res2);             //2
    console.log(res3);             //2
    console.log(res4);             //-1

View Code

 

2.18 str.replace()：
str.replace(/正则/，新的字符)：
str.replace(/正则/，fn(con,a,b,c))：
作用：在字符串中搜索指定内容，并使用新的内容去替换

用法1：字符串.replace(要查找的字符串，新的字符串)
参数：要查找的字符串，新的字符串
返回值：返回新的字符串，不改变原字符串

用法2：第二个参数可以是一个回调函数，每一次的匹配，都会执行一次回调函数，并把回调函数的返回值作为新的内容，
参数：要查找的字符串，fn
fn的参数：第一个参数是匹配的内容，第二个及以后是子项，即()里面的内容
返回值：回调函数的返回值作为新的内容

    let str1 = ‘ma1ddddma22ggg222gma3333‘;
    let res1 = str1.replace(‘2‘,‘*‘); //参数是字符串，字符串
    let res2 = str1.replace(/mad/g,‘*‘); //参数是正则，字符串
    let res3 = str1.replace(/d/g,function (con) {
        var s=‘‘;
        for(var i=0; i<con.length; i++){
            s+=‘*‘;
        }
        return s;
    });

    console.log(‘原始‘,str1)       //ma1ddddma22ggg222gma3333
    console.log(res1);             //ma1ddddma*2ggg222gma3333
    console.log(res2);             //*dddd*2ggg222g*333
    console.log(res3);             //ma*ddddma**ggg***gma****

View Code

// replace---敏感词替换
    let str1 = ‘js激发了对方css法律的纠js纷‘;
    let res1 = str1.replace(/js|css/g,function (con) {
        var s=‘‘;
        for(var i=0; i<con.length; i++){
            s+=‘*‘;
        }
        return s;
    });

    console.log(‘原始‘,str1)       //js激发了对方css法律的纠js纷
    console.log(res1);             //**激发了对方***法律的纠**纷

View Code

    let str1 = ‘js11激发了对方css222法律的纠js4343纷‘;
    let res1 = str1.replace(/(js)(d*)/g,function (con,tt,mm) {
        console.log(con,tt,mm)
        var s=‘‘;
        for(var i=0; i<mm.length; i++){
            s+=‘*‘;
        }
        return tt + s;
    });

    console.log(‘原始‘,str1)       //js11激发了对方css222法律的纠js4343纷
    console.log(res1);             //js**激发了对方css222法律的纠js****纷

View Code

 

 

包装对象的理解

问题：只有对象才有属性和方法，为什么字符串、数字、布尔值这些非对象类型的数据可以调用属性和方法？
解决：当我们去访问一个基本数据类型（字符串，数字，布尔值）数据下的属性或方法的时候，js内部会根据当前这个数据的类型，调用与其对应的构造函数，使用其值创建一个对应类型出来。我们把这个称为：包装对象。
例子：
var str = ‘miaov‘;
str.length => str是基本类型，没有属性，包装：在内部创建一个与该类型一样的虚拟对象，var tempStr = new String(str)，return tempStr.length，我们把这个称为：包装对象。
所以，字符串方法，数字方法，布尔值方法，操作都不会改变原有的数据。

 

改变字符串的方法：trim,padStart,padEnd

合并字符串从concat不改变原字符串