Fork me on GitHub

JavaScript中String字符串方法总结

JavaScript中String字符串方法总结

  1. JavaScript中String字符串方法总结

  2. JavaScript中Array数组方法总结

  3. JavaScript中Object对象方法总结

方法 是否修改原始值 是否有返回值 描述
concat() 连接两个或更多字符串,并返回新的字符串。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toString() 返回一个字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
fromCharCode() 将 Unicode 编码转为字符。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
substring() 提取字符串中两个指定的索引号之间的字符。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
substr() 从起始索引号提取字符串中指定数目的字符。
split() 把字符串分割为字符串数组。
match() 查找找到一个或多个正则表达式的匹配。返回一个数组或者null。
replace() 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串,默认只能替换第一次匹配,想替换全部,需要使用正则表达式的g模式。返回新字符串。
replaceAll() 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串,只能全部替换。返回新字符串。
search() 查找与正则表达式相匹配的值。返回下标。
includes() 查找字符串中是否包含指定的子字符串,返回布尔值。
startsWith() 查看字符串是否以指定的子字符串开头,返回布尔值。
endsWith() 判断当前字符串是否是以指定的子字符串结尾的(区分大小写),返回布尔值。
repeat() 复制字符串指定次数,并将它们连接在一起返回。返回新字符串。
toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
padStart() 如果某个字符串不够指定长度,会在头部补全。返回新字符串。
padEnd() 如果某个字符串不够指定长度,会在尾部补全。返回新字符串。
trim() 去除字符串两边的空白。返回新字符串。
trimStart() 消除字符串头部的空格,除了空格键,方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。返回新字符串。
trimEnd() 消除尾部的空格,除了空格键,方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。返回新字符串。
at() 方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)。

方法解析

代码没有特殊标注情况下,本文环境均是在Chrome环境下测试输出

string.concat() : 连接两个或更多字符串,并返回新的字符串。原始值不变。

写法麻烦,一般直接使用 加号拼接,效果一样



        let str1 = 'asdfgh';
        let str2 = 123456;
        let str3 = 'zxcvbn';
        // zxcvbnasdfgh123456
        console.log( str3.concat( str1, str2 ) );

string.toLowerCase() : 把字符串转换为小写。原始值不变。


        let str1 = 'ASDFGH';
        // asdfgh ------- ASDFGH
        console.log( str1.toLowerCase(), '-------', str1 );

string.toUpperCase() : 把字符串转换为大写。原始值不变。


        let str1 = 'asdfgh';
        // ASDFGH ------- asdfgh
        console.log( str1.toUpperCase(), '-------', str1 );

string.toString() : 返回一个字符串。原始值不变。

null和undefined没有这个方法,会报错

        let str1 = [1,'name'];
        // 输出 字符串,数组
        // 1,name  -------  [1, 'name']
        console.log( str1.toString(), '-------', str1 );


        let str2 = false;
        // 输出 字符串,布尔值
        // false  -------  false
        console.log( str2.toString(), '-------', str2 );


        let str3 = { name:1 };
        // 输出 字符串,布尔值
        // [object Object] ------- {name: 1}
        console.log( str3.toString(), '-------', str3 );

string.charAt() : 返回下标位置的字符串。原始值不变。

  1. 默认值是0,可以不传下标
  2. 赋值或大于字符串长度,返回空

        let str1 = 'asdfgh';
        // g ------- a -------  -------  ------- asdfgh
        console.log( str1.charAt(4), '-------', str1.charAt(), '-------', str1.charAt(-5), '-------', str1.charAt(10), '-------',str1 );

string.charCodeAt() : 返回在指定的位置的字符的 Unicode 编码。原始值不变。

  1. 默认值是0,可以不传下标
  2. 赋值或大于字符串长度,返回空


        let str1 = 'asdfgh';
        // 103 '-------' 97 '-------' NaN '-------' NaN '-------' 'asdfgh'
        console.log( str1.charCodeAt(4), '-------', str1.charCodeAt(), '-------', str1.charCodeAt(-5), '-------', str1.charCodeAt(10), '-------',str1 );

string.fromCharCode() : 将 Unicode 编码转为字符。原始值不变。


        // 将Unicode 编码汉字打印出来
        for(var i=0x4e00; i<=0x9fa5; i++){
            console.log(String.fromCharCode(i));
        }

string.indexOf() : 返回某个指定的字符串值在字符串中首次出现的位置。原始值不变。

  1. 区分大小写
  2. 如果找到了就不再继续找了,如果没找到,返回-1
  3. 从左往右

        let str1 = 'asdfgh';
        // 4 '-------' 1 '-------' -1 '-------' 'asdfgh'
        console.log( str1.indexOf('g'), '-------', str1.indexOf('sd'), '-------', str1.indexOf('e'), '-------',str1 );

string.lastIndexOf() : 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。原始值不变。

  1. 区分大小写
  2. 如果找到了就不再继续找了,如果没找到,返回-1
  3. 从右往左

        let str1 = 'asdfgh';
        // 4 '-------' 1 '-------' -1 '-------' 'asdfgh'
        console.log( str1.lastIndexOf('g'), '-------', str1.lastIndexOf('sd'), '-------', str1.lastIndexOf('e'), '-------',str1 );

string.substring( index1, index2 ) : 提取字符串中两个指定的索引号之间的字符,包含开始位置,不包含结束位置。原始值不变。

  1. 自动将负数转换成0,将大于str长度的转换成str长度
  2. 两个参数不管顺序如何,始终以小数字为开始,大数字为结束
  3. 两个参数都不传,就是完整字符串
  4. 如果两个参数都是负数或者两个参数都大于str长度,截取的内容都是空
  5. 如果一个正数一个负数就是整个字符串
  6. 只传一个参数,一直截取到最后,如果是负数,转换成0,如果大于str长度,就截空
        let str1 = 'asdfgh';
        // df
        console.log( str1.substring( 2, 4 ) );
        // asdf
        console.log( str1.substring( -2, 4 ) );
        // as
        console.log( str1.substring( 2, -4 ) );
        // dfgh
        console.log( str1.substring( 2 ) );
        // asdfgh
        console.log( str1.substring(  ) );

string.slice( start, end ) : 提取字符串的片断,并在新的字符串中返回被提取的部分。原始值不变。

  1. 自动将传入的负值与字符串的长度相加
  2. end参数小于start参数的话,返回空字符串

        let str1 = 'asdfghjkl';
        // df
        console.log( str1.slice( 2, 4 ) );
        // 
        console.log( str1.slice( -2, 4 ) );
        // dfg
        console.log( str1.slice( 2, -4 ) );

string.substr( start, num ) : 从起始索引号提取字符串中指定数目的字符。原始值不变。

  1. start开始位置,num参数指定的则是返回的字符个数。如果没有给方法传递num参数,则将字符串的长度作为结束位置
  2. 自动将负数的start参数加上字符串的长度,将负数的第num参数转换为0

        let str1 = 'asdfgh';
        // dfgh
        console.log( str1.substr( 2, 4 ) );
        // gh
        console.log( str1.substr( -2, 4 ) );
        // 
        console.log( str1.substr( 2, -4 ) );
        // dfgh
        console.log( str1.substr( 2 ) );
        // asdfgh
        console.log( str1.substr(  ) );

string.split() : 把字符串分割为字符串数组。原始值不变。

  1. 没找到字符,就返回完整字符串
  2. 旧浏览器不传值会将每一个字母都且分开,现在是翻红完整字符串

        let str1 = 'as_d_fgh';
        // ['as', 'd', 'fgh']
        console.log( str1.split( '_' ) );
        // ['as_d_fgh']
        console.log( str1.split( '.' ) );
        // ['as_d_fgh']
        console.log( str1.split() );

string.match() : 查找找到一个或多个正则表达式的匹配。返回一个数组。原始值不变。

  1. 如果没有符合条件,返回null
  2. regexp没有标志g,match方法就只能在str中执行一次匹配,没有找到匹配文本就返回null,如果匹配到了,就返回一个数组存放了与匹配到文本有关的信息,数组的第0项是与regexp匹配的文本,第1项是匹配到文本的起始字符位置,第2项是str字符串。
  3. regexp如果有g,mantch 方法执行全局检索,没有就返回null,有就返回匹配到的所有字符串,是一个数组

        let str1 = '2017-07-03';
        let regDate = /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/;
        // ['2017-07-03', '2017', '07', '03', index: 0, input: '2017-07-03', groups: undefined]
        // 先返回完整正则匹配信息,再依次返回分组信息,然后返回文本的起始字符的位置,然后是str的完整字符串
        console.log(str1.match(regDate));
        
        let regDate2 = /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/g;
        // ['2017-07-03']
        console.log(str1.match(regDate2));

string.replace() : 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串,默认只能替换第一次匹配,想替换全部,需要使用正则表达式的g模式。返回新字符串。原始值不变。


        // str.replace(旧符号,新符号); 把str中的%替换成#
        let str1 = '20%,50% OFF de Desconto 20%,50%Lancheiras';

        // 只替换一次
        // 20#,50% OFF de Desconto 20%,50%Lancheiras
        console.log(str1.replace( '%', '#'));

        // 正则可以批量替换
        // 20#,50# OFF de Desconto 20#,50#Lancheiras
        console.log(str1.replace( /\%/g, '#'));

        let newStr=str1.replace( /\d{2}\%/g, function( item, index ){
            let tmp = '';
            tmp='<i>' + item + '</i>';
            return tmp;
        });

        // 正则与函数配合,进行复杂替换
        // <i>20%</i>,<i>50%</i> OFF de Desconto <i>20%</i>,<i>50%</i>Lancheiras
        console.log(newStr);

string.replaceAll(searchValue, replacement) :在字符串中查找匹配的子串,并替换与正则表达式匹配的子串,只能全部替换。返回新字符串。原始值不变。

  1. searchValue是搜索模式,可以是一个字符串,也可以是一个全局的正则表达式(带有g修饰符),正则表达式不带g,程序会报错。
  2. replacement是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。
    • $&:匹配的字符串。
    • $ ` :匹配结果前面的文本。
    • $':匹配结果后面的文本。
    • $n:匹配成功的第n组内容,n是从1开始的自然数。这个参数生效的前提是,第一个参数必须是正则表达式。
    • $$:指代美元符号$。
  3. replacement除了为字符串,也可以是一个函数,该函数的返回值将替换掉第一个参数searchValue匹配的文本。
    • 第一个参数是捕捉到的匹配内容
    • 第二个参数捕捉到是组匹配(有多少个组匹配,就有多少个对应的参数)。
    • 倒数第二个参数是捕捉到的内容在整个字符串中的位置
    • 最后一个参数是原字符串。
        // str.replace(旧符号,新符号); 把str中的%替换成#
        let str1 = '20%,50% OFF de Desconto 20%,50%Lancheiras';

        // 全部替换
        // 20#,50# OFF de Desconto 20#,50#Lancheiras
        console.log(str1.replaceAll( '%', '#'));

// $& 表示匹配的字符串,即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`,$` 指代`a`
// 对于第二个`b`,$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`,$' 指代`bc`
// 对于第二个`b`,$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配,指代`ab`
// $2 表示正则表达式的第二个组匹配,指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'
'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'
const str = '123abc456';
const regex = /(\d+)([a-z]+)(\d+)/g;

function replacer(match, p1, p2, p3, offset, string) {
  return [p1, p2, p3].join(' - ');
}

str.replaceAll(regex, replacer)
// 123 - abc - 456


// 上面例子中,正则表达式有三个组匹配,所以replacer()函数的第一个参数match是捕捉到的匹配内容(即字符串123abc456),后面三个参数p1、p2、p3则依次为三个组匹配。

string.search() : 查找与正则表达式相匹配的值首次出现的位置。原始值不变。跟indexOf功能一模一样,但是search方法的参数是正则表达式


        let str1 = 'ancHLeiras';
        let reg = /a/i;
        let reg2 = /h/i;
        // 0
        console.log(str1.indexOf( 'a' ));
        // 0
        console.log(str1.search( reg ));

        // -1
        console.log(str1.indexOf( 'h' ));
        // 3
        console.log(str1.search( reg2 ));

string.includes() : 查找字符串中是否包含指定的子字符串,返回布尔值。原始值不变。

string.startsWith() : 查看字符串是否以指定的子字符串开头,返回布尔值。原始值不变。

string.endsWith() : 判断当前字符串是否是以指定的子字符串结尾的(区分大小写),返回布尔值。原始值不变。

  1. 这三个方法都支持第二个参数,includes、startsWith表示开始搜索的位置直到字符串结束;endsWith参数代表个数(n),从字符串开始的前n个字符

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

        // false
        console.log( str1.startsWith( 'Hello', 6 ) );
        // false
        console.log( str1.endsWith( '!', 5 ) );
        // true
        console.log( str1.includes( 'o', 6 ) );

        // false
        console.log( str1.startsWith( 'Hello', 55 ) );
        // true
        console.log( str1.endsWith( '!', 55 ) );
        // false
        console.log( str1.includes( 'o', 55 ) );

        // true
        console.log( str1.startsWith( 'Hello', -6 ) );
        // false
        console.log( str1.endsWith( '!', -5 ) );
        // true
        console.log( str1.includes( 'o', -6 ) );

string.repeat() : 复制字符串指定次数,并将它们连接在一起返回。返回新字符串。原始值不变。

  1. 参数如果是小数,会被取整。
  2. 参数是负数或者Infinity,会报错。
  3. 参数是字符串,则会先转换成数字。

        let str1 = 'hello';
        
        // hellohello ----- hello
        console.log(str1.repeat( 2 ), '-----', str1 );

string.padStart() : 如果某个字符串不够指定长度,会在头部补全。返回新字符串。原始值不变。

string.padEnd() : 如果某个字符串不够指定长度,会在尾部补全。原始值不变。

        let a = 'x';
        let a1 = a.padStart(5, 'ab');
        console.log(a, a1); // 'x' 'ababx'

        let b = 'x';
        let b1 = b.padStart(4, 'ab');
        console.log(b, b1); // 'x' 'abax'

        let c = 'x';
        let c1 = c.padEnd(5, 'ab');
        console.log(c, c1); // 'x' 'xabab'

        let d = 'x';
        let d1 = d.padEnd(4, 'ab');
        console.log(d, d1); // 'x' 'xaba'

string.trim() : 去除字符串两边的空白。返回新字符串。原始值不变。

  1. 空白符包括:空格、制表符 tab、换行符等其他空白符等。
  2. 不适用于 null, undefined, Number 类型。

        let str1 = '      hel   lo     ';
        
        // |hel   lo|
        console.log( '|' + str1.trim() + '|' );

string.trimStart() : 消除字符串头部的空格,返回新字符串。

  1. 空白符包括:空格、制表符 tab、换行符等其他空白符等。
  2. 不适用于 null, undefined, Number 类型。

string.trimEnd() : 消除尾部的空格,返回新字符串。

  1. 空白符包括:空格、制表符 tab、换行符等其他空白符等。
  2. 不适用于 null, undefined, Number 类型。
        let a = '  abc  ';
        let a1 = a.trim();
        console.log(`|${a}| |${a1}|`); //|  abc  | |abc|

        let b = '  abc  ';
        let b1 = b.trimStart();
        console.log(`|${b}| |${b1}|`); //|  abc  | |abc  |
        
        let c = '  abc  ';
        let c1 = c.trimEnd();
        console.log(`|${c}| |${c1}|`); //|  abc  | |  abc|

string.at() : 方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)。

  1. 参数位置超出了字符串范围,at()返回undefined。
        let str = 'hello';
        console.log(str.at(1)); // "e"
        console.log(str.at(-1)); // "o"
        console.log(str.at(10)); // undefined
        console.log(str.at(-10)); // undefined
posted @ 2021-12-28 19:45  较瘦  阅读(338)  评论(0编辑  收藏  举报
知识点文章整理