JavaScript 前端 String 字符串常见用法15种

前言：

JavaScript中String常见方法归纳，不足之处留下宝贵意见！

1:String.charAt(index)

Tip：返回字符串指定位置的字符，index 为必须参数，类型为number（0到str.length-1之间，否则该方法返回 空串）另外：str.charAt()即不带参数和str.charAt(NaN)均返回字符串的第一个字符";

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";

      // index 1
      console.log(`index = 1:`,str.charAt(1)); // index = 1: 0
      // index 0
      console.log(`index = 0:`,str.charAt());  // index = 0: z
      // index NaN
      console.log(`index = NaN:`,str.charAt(NaN));  // index = NaN: z
    }

    

2:String.charCodeAt(index)

Tip：返回指定位置字符串的Unicode编码；index 为必须参数，类型为number（0到str.length-1之间，否则该方法返回 NaN）";

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";

      // index 1
      console.log(`index = 1:`,str.charCodeAt(1)); // index = 1: 48
      // index 100
      console.log(`index = 100:`,str.charCodeAt(100));  // index = 100: NaN

    }

3:String.concat()(String,String...)

Tip：用于连接两个或者多个字符串的连接；功能和 “+” 拼接没啥两样

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";
      let newStr = "NEWSTRING";

      console.log(`concat:`,str.concat(newStr)); // concat: z0a1b2c3d4e5f6h7g8k9X7Y8JNEWSTRING

    }

4:String.fromCharCode()(unicode1,unicode2,...,nuicodeX)

Tip：接受一个Unicode编码值，返回一个字符；该方法是 String 的静态方法，语法应该是 String.fromCharCode()";

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";
      let newStr = "NEWSTRING";
      let fromCode = String.fromCharCode(97)

      console.log(`fromCharCode:`,fromCode); // fromCharCode: a

    }

5:String.indexOf(searchString,StartindexString)

Tip：返回字符在字符串中首次出现的位置，若匹配不到，则返回  -1 ，与 lastIndexOf() 相似，后者从末尾开始检索，返回最后一位出现的字符位置";searchString即开始搜索的字符 必选，startIndexString即开始搜索字符的索引 非必需 省略则默认从首字符开始检索";

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";
      let newStr = "NEWSTRING";

      console.log(`indexOf:`,str.indexOf(8)); // indexOf: 17
      console.log(`non-existent-indexOf`,str.indexOf(100)); // non-existent-indexOf -1

    }

6:String.lastIndexOf(searchString,StartindexString)

Tip：参考方法5，indexOf()

7:String.match(regExp)

Tip：正则匹配，检索出符合正则的一个或者多个字符，若检索没有，则返回 null；

forexample：

    testString(){
      let str = "z0a1b2c3d4e5f6h7g8k9X7Y8J";
      let newStr = "NEWSTRING";
      let regExp = /[a-z|A-Z]/g;
      // 常见邮箱正则：/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
      // 常见电话号码正则：/^1[3456789]{1}\d{9}$/
      console.log(`match:`,str.match(regExp)); // match: (13) ["z", "a", "b", "c", "d", "e", "f", "h", "g", "k", "X", "Y", "J"]

    }

8:String.replace(regExp,String)

Tip：用于字符串替换，或者替换成与正则相匹配的字符串；

forexample：

    testString(){
      let str = "z0a1B2c3d4E";
      let newStr = "NEWSTRING";
      let regExp = /[a-z|A-Z]/g;
      
      console.log(`replace:`,str.replace(regExp,"REPLACE")); // replace: REPLACE0REPLACE1REPLACE2REPLACE3REPLACE4REPLACE

    }

9:String.search(regExp/substr)

Tip：检索字符串中的字符，或者检索符合正则的字符；返回值：str中第一个与正则或字符串相匹配的子串的起始位置。search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置";

forexample：

    testString(){
      let str = "z0a1B2c3d4E";
      let newStr = "NEWSTRING";
      let regExp = /[a-z|A-Z]/g;

      console.log(`search:`,str.search(regExp)); // search: 0

    }

10:String.slice(startIndex, endIndex)

Tip：截取字符串某段字符，并且以新的字符串作为返回值；返回值包含startIndex不包含endIndex，忽略endIndex则返回包括startIndex到原字符串结尾的字符串，另外参数还有负数反向用法；

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`slice:`,str.slice(1,5)); // slice: 0a1B

    }

11:String.split(index)

Tip：字符串分割组成新的字符串数组；split（","），将字符串分割成数组；split（''|"）,用 | 将字符串分开等等，触类旁通即可。

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`split:`,str.split(1)); // split: (2) ["z0a", "B2c3d4E"]
    }

12:String.substr(startIndex，endIndex)

Tip：截取字符串从开始下标到结束下标的字符串；开始startIndex，结束endIndex；忽略length则返回从startIndex到字符串尾字符";

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`substr:`,str.substr(1,5)); // substr: 0a1B2

    }

12:String.substring(startIndex，endIndex)

Tip：截取字符串从开始下标到结束下标的字符串；不包含endIndex下标字符；

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`substring:`,str.substring(1,5)); // substring: 0a1B

    }

13:String.toLocaleUpperCase()

Tip：字符串大写；

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`toLocaleUpperCase:`,str.toLocaleUpperCase()); // toLocaleUpperCase: Z0A1B2C3D4E

    }

14:String.toLocaleLowerCase()

Tip : 字符串小写；

forexample：

    testString(){
      let str = "z0a1B2c3d4E";

      console.log(`toLocaleLowerCase:`,str.toLocaleLowerCase()); // toLocaleLowerCase: z0a1b2c3d4e

    }

此外还有另外两种方式，效果同13，14：toUpperCase()/toLowerCase()；

14:String.trim()

Tip：删除字符串两端空白。

forexample：

    testString(){
      let str = "    z0a1B  2c  3d4E    ";

      console.log(`trim:`,str.trim()); // trim: z0a1B  2c  3d4E

    }

15:String.length

Tip：字符串长度； 常规操作不举例。