【JS】字符串常用操作

深藏阁楼爱情的钟 2022-05-16 03:04 502阅读 0赞

## 转义字符串 ##

//JavaScript的字符串就是用' '或" "括起来的字符表示。

//如果 ' 本身也是一个字符，那就可以用" "括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。

//如果字符串内部既包含 ' 又包含 " 怎么办？可以用转义字符 \\ 来标识，比如： 'I\\'m \\"OK\\"!';   表示的字符串内容是：I'm "OK"!

//转义字符 \\ 可以转义很多字符，比如\\n表示换行，\\t表示制表符，字符\\本身也要转义，所以\\\\表示的字符就是\\。

//ASCII字符可以以\\x\#\#形式的十六进制表示，例如： '\\x41'; // 完全等同于 'A' //还可以用\\u\#\#\#\#表示一个Unicode字符： '\\u4e2d\\u6587'; // 完全等同于 '中文'

## 字符串对象的属性 ##

1、lenght属性

//lenght算是字符串中非常常用的一个属性了，它的功能是获取字符串的长度。
    要注意的是JavaScript中的中文每个汉字也只代表一个字符。
    var str = 'abc';
    console.log(str.length);//返回3

2、prototype属性

//prototype在面向对象编程中会经常用到，用来给对象添加属性或方法，并且添加的方法或属性在所有的实例上共享。
    因此也常用来扩展js内在对象，如下面的代码给字符串添加了一个去除两边空格的方法
    var str = ' a bc';
    String.prototype.trim = function(){
        return this.replace(/^\s*|\s*$/g, '');
    }
    console.log(str.trim);//返回abc

## 字符串对象的方法 ##

1、获取类方法

//charAt()  , stringObject.charAt(index)
    //charAt()方法用来获取指定位置的字符串，index为字符串的索引值，从0开始到string.leng - 1,
    若不在这个范围内，则返回一个空字符串
    var str = 'abcde';
    console.log(str.charAt(2));//返回c
    console.log(str.charAt(8));//返回空字符串
    
    //charCodeAt()  , stringObject.charCodeAt(index)
    //charCodeAt()方法可返回指定位置的字符的Unicode编码。
    console.log(str.charCodeAt(0));        //返回97
    
    //fromCharCode()  , fromCharCode()可接受一个或多个Unicode值，然后返回一个字符串。另外该方法是String 的静态方法，
    字符串中的每个字符都由单独的数字Unicode编码指定。
    console.log(String.fromCharCode(97, 98, 99, 100, 101));    //返回abcde

2、查找类方法

//indexOf() , stringObject.indexOf(searchvalue,fromindex)
    //indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，searchvalue表示要查找的子字符串，
    fromindex表示查找的开始位置，省略的话则从开始位置进行检索。
    var str = 'abcdeabcde';
    console.log(str.indexOf('a'));  // 返回0
    console.log(str.indexOf('a',2));  // 返回5
    console.log(str.indexOf('bc'));  // 返回1
    
    //lastIndexOf() , stringObject.lastIndexOf(searchvalue,fromindex)
    //lastIndexOf()语法与indexOf()类似，它返回的是一个指定的子字符串值最后出现的位置，其检索顺序是从后向前。
    console.log(str.lastIndexOf('a'));    // 返回5
    console.log(str.lastIndexOf('a', 3));    // 返回0 从第索引3的位置往前检索
    console.log(str.lastIndexOf('bc'));    // 返回6
    
    //search() ， stringObject.search(substr)，stringObject.search(regexp)
    //search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置，
    如果没有匹配的，则返回-1
    var str1 = 'abcDEF';
    console.log(str1.search('c'));    //返回2
    console.log(str1.search('d'));    //返回-1
    console.log(str1.search(/d/i));    //返回3
    
    //match() , stringObject.match(substr) , stringObject.match(regexp)
    //match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
    //如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式，那么match()方法会从开始位置执行一次匹配，如果没有匹配到结果，
    则返回null。否则则会返回一个数组，该数组的第0个元素存放的是匹配文本，除此之外，
    返回的数组还含有两个对象属性index和input，分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。
    var str2 = '1a2b3c4d5e';
    console.log(str2.match('h'));    //返回null
    console.log(str2.match('b'));    //返回["b", index: 3, input: "1a2b3c4d5e"]
    console.log(str2.match(/b/));    //返回["b", index: 3, input: "1a2b3c4d5e"]
    //如果参数传入的是具有全局匹配的正则表达式，那么match()从开始位置进行多次匹配，直到最后。
    如果没有匹配到结果，则返回null。否则则会返回一个数组，数组中存放所有符合要求的子字符串，并且没有index和input属性。
    console.log(str2.match(/h/g));    //返回null
    console.log(str2.match(/\d/g));    //返回["1", "2", "3", "4", "5"]

3、截取类方法

// substring() , stringObject.substring(start,end)
    //substring()是最常用到的字符串截取方法，它可以接收两个参数(参数不能为负值)，分别是要截取的开始位置和结束位置，
    它将返回一个新的字符串
    //，其内容是从start处到end-1处的所有字符。若结束参数(end)省略，则表示从start位置一直截取到最后。
    var str = 'abcdefg';
    console.log(str.substring(1, 4));    //返回bcd
    console.log(str.substring(1));    //返回bcdefg
    console.log(str.substring(-1));    //返回abcdefg，传入负值时会视为0
    
    //slice() , stringObject.slice(start,end)
    //slice()方法与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，
    slice()中的参数可以为负值，
    //如果参数是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符。
    console.log(str.slice(1, 4));    //返回bcd
    console.log(str.slice(-3, -1));    //返回ef
    console.log(str.slice(1, -1));    //返回bcdef
    console.log(str.slice(-1, -3));    //返回空字符串，若传入的参数有问题，则返回空
    
    //substr() , stringObject.substr(start,length)
    //substr()方法可在字符串中抽取从start下标开始的指定数目的字符。
    其返回值为一个字符串，包含从 stringObject的start（包括start所指的字符）处开始的length个字符。
    //如果没有指定 length，那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数，
    则表示从字符串尾部开始算。
    console.log(str.substr(1, 3))    //返回bcd
    console.log(str.substr(2))    //返回cdefg
    console.log(str.substr(-2, 4))    //返回fg，目标长度较大的话，以实际截取的长度为准

4、其他方法

// replace() , stringObject.replace(regexp/substr,replacement)
    // replace()方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（可以是正则），后者为用来替换的文本。
    //如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式，那么replace()方法将只进行一次替换（即替换最前面的），返回经过一次替换后的结果字符串。
    var str = 'abcdeabcde';
    console.log(str.replace('a', 'A'));
    console.log(str.replace(/a/, 'A'));
    
    //如果第一个参数传入的全局匹配的正则表达式，那么replace()将会对符合条件的子字符串进行多次替换，最后返回经过多次替换的结果字符串。
    var str1 = 'abcdeabcdeABCDE';
    console.log(str1.replace(/a/g, 'A'));    //返回AbcdeAbcdeABCDE
    console.log(str1.replace(/a/gi, '$'));    //返回$bcde$bcde$BCDE
    
    //split() , stringObject.split(separator,howmany)
    //split()方法用于把一个字符串分割成字符串数组。第一个参数separator表示分割位置(参考符)，第二个参数howmany表示返回数组的允许最大长度(一般情况下不设置)。
    var str2 = 'a|b|c|d|e';
    console.log(str2.split('|'));    //返回["a", "b", "c", "d", "e"]
    console.log(str2.split('|', 3));    //返回["a", "b", "c"]
    console.log(str2.split(''));    //返回["a", "|", "b", "|", "c", "|", "d", "|", "e"]
    
    //也可以用正则来进行分割
    var str3 = 'a1b2c3d4e';
    console.log(str3.split(/\d/)); //返回["a", "b", "c", "d", "e"]
    
    // toLowerCase()和toUpperCase()
    //toLowerCase()方法可以把字符串中的大写字母转换为小写，toUpperCase()方法可以把字符串中的小写字母转换为大写。
    var str4 = 'JavaScript';
    console.log(str4.toLowerCase());    //返回javascript
    console.log(str4.toUpperCase());    //返回JAVASCRIPT

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220516/26406681555d41a0921a61984e370c42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/e0a0c5f34c8944f1824c51ba4e235db7.png