JavaScript中常用字符串方法及技巧

1.返回值为字符串

1.1 toString

//语法  返回指定对象的字符串形式
srt.toString()
复制代码

• 返回 字符串

  console.log([1,2,3].toString())//“1，2，3”
  ​
  let Num=123
  console.log(Num.toString()) //"123"
  复制代码

1.2 valueOf

// 返回 string 对象的原始值
str.valueOf()
复制代码

• 返回 string 对象的原始值

  var x = new String('Hello world');
  console.log(x.valueOf()); // Displays 'Hello world'
  复制代码

2.提取字符串

2.1 substring(提取)

//语法 beginIndex 截取字符的开始位置，endIndex 结束位置  左闭右开 
str.substring(beginIndex,endIndex)
复制代码

• 左闭右开 （左包括 右不包括）

• 返回 提取开始位置到结束位置的新字符串 （原字符串不会改变_)

• 支持反序 不支持负数

  var anyString = "Mozilla";
  // 输出 "lla"
  console.log(anyString.substring(4,7));
  console.log(anyString.substring(7,4));
  ​
  // 输出 ""
  console.log(anyString.substring(4,4));
  ​
  // 输出 "Mozill"
  console.log(anyString.substring(0,6));
  复制代码

2.2 slice(与数组方法相同)(提取）

//语法  beginIndex提取原字符的开始位置，endIndex结束位置   左闭右开[ )  |（左包括 右不包括）
str.slice(beginIndex,endIndex)
复制代码

• 提取某个字符串的一部分，并返回一个新的字符串，(且不会改动原字符串)

  var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
  ​
  str2 = str1.slice(1, 8), // 输出：he morn
  str5 = str1.slice(30);  // 输出：""
  str.slice(-3);     // 返回 'us.'
  str.slice(-3, -1); // 返回 'us'
  复制代码

2.3 splice（与数组方法相同)(截取)

此方法与数组的splice用法一致

//语法  beginIndex提取原字符的开始位置，endIndex结束位置   左闭右开[ )  |（左包括 右不包括）
str.slice(beginIndex,endIndex)
复制代码

• 左闭右开 （左包括 右不包括）

• 返回 提取原字符串的新字符串 （且会改变原字符串）

• 不支持反序 、支持负数

  var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
      str2 = str1.slice(1, 8),
      str3 = str1.slice(4, -2),  //提取第五个字符开始到倒数第二个字符
      str4 = str1.slice(12),     //提取第13个字符开始至最后
      str5 = str1.slice(30);
      str6 = str1.slice(-3);     
    
     
  console.log(str2); // 输出：he morn
  console.log(str3); // 输出：morning is upon u
  console.log(str4); // 输出：is upon us.
  console.log(str5); // 输出：""
  str.slice(-3);     // 返回 'us.'
  复制代码

3.字符串转换成数组

3.1 split

//语法 separator 分隔符    limit 限定分割数量
str.split(separator,separator)
复制代码

• 使用指定的分隔符将字符串分割成，子字符串数组

  • 示例

  const myString = 'this|is|a|Test';
  const splits = myString.split(['|']);
  ​
  console.log(splits); //["this", "is", "a", "Test"]
  复制代码

  • 限制返回值中分割元素数量

  var myString = "Hello World. How are you doing?";
  var spl = myString.split(" ", 3); //以空格分隔
  ​
  console.log(splits); // ["Hello", "World.", "How"]
  ​
  var str="1234"
  var spl=str.split("")//以空串分隔
  console.log()//["1","2","3","4"]
  复制代码

  • 用split()来颠倒字符串顺序

  const str = 'asdfghjkl';
  let strReverse=str.split(" ").reverse().join(" ")
  ​
  concole.log(strReverse) // 'lkjhgfdsa'
  复制代码

4.拼接字符串

4.1 join（与数组相同）

//语法   separator：分隔符
 str.join("separator")
复制代码

• 以什么分隔符 拼接成字符串，并返回这个字符串

  const elements = "FireAirWater"
  ​
  console.log(elements.join(,));//"Fire,Air,Water"
  ​
  console.log(elements.join('-'));//"Fire-Air-Water"
  复制代码

4.2 concat（与数组相同）

//语法 strN  需要连接的字符串
str.concat(str2, [, ...strN])
复制代码

• 将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回

  let str = 'Hello, '
  console.log(str.concat('Kevin', '. Have a nice day.'))
  // Hello, Kevin. Have a nice day.
  ​
  let greetList = ['Hello', ' ', 'Venkat', '!']
  "".concat(...greetList)  // "Hello Venkat!"
  复制代码

5.查找字符或索引

5.1 charAt

//语法  index 访问字符串的索引
str.charAt(index)
复制代码

• 从一个字符串中返回指定的字符

  var str="Brave new world"
   str.charAt(0)  //"B"
   str.charAt(1)  //"r"
  复制代码

5.2 indexOf（与数组相同）

//语法 searchValue:要被查找的字符串值 fromIndex：开始查找的位置  从左往右查找
str.indexOf(searchValue,fromIndex)
复制代码

• 返回 第一次出现的指定值的索引，如果未能找到则返回-1

  //indexOf区分大小写
  var myString    = "brie, pepper jack, cheddar";
  var myCapString = "Brie, Pepper Jack, Cheddar";
  ​
  console.log(myString.indexOf("cheddar"));//  19
  ​
  console.log(myCapString.indexOf("cheddar"));// -1
  ​
  复制代码

5.3 lastIndexOf(与数组方法相同)

//语法 searchValue:要被查找的字符串值 fromIndex：开始查找的位置  从右往左查找 (该索引仍是以从左至右0开始记数的)
str.lastIndexOf(searchValue,fromIndex)
复制代码

• 返回值第一次出现的索引（该索引仍是从右向左查找)，如果没找到则返回-1

  //区分大小写
  var str = 1，2，3，4;
  var last = str.lastIndexOf(2); // index is 3
  ​
  index = str.lastIndexOf(7); // index is -1
  复制代码

5.4 includes(与数组方法相同)

//语法 valueToFind:要查找的元素值 fromIndex:从fromIndex 索引处开始查找 
 str.includes(valueToFind,fromIndex )
复制代码

• 用来判定字符串中是否包含 一个指定的值 ,如果包含则返回true ，否则返回false

  注意 使用 includes()比较字符串和字符时是区分大小写的。

  'Blue Whale'.includes('blue'); // returns false
  ​
  'Blue Whale'.includes('Blue'); // returns false
  复制代码

5.5 startsWith

//语法  searchString 要搜索的子字符串  position 搜索的开始位置    
str.startsWith(searchString,position)
复制代码

• 在字符串中开头为指定字符 则返回true 否则返回false

• 区分大小写

  var str = "To be, or not to be, that is the question.";
  ​
  alert(str.startsWith("To be"));         // true
  alert(str.startsWith("not to be"));     // false
  alert(str.startsWith("not to be", 10)); // true
  复制代码

5.6 endsWith

//语法 searchString 要搜索的子字符串。length 要搜索的长度
str.endsWith(searchString,length)
复制代码

• 指定的子字符串在字符串的末尾。则返回true 否则返回的是false

• 此方法区分大小写、

  var str = "To be, or not to be, that is the question.";
  ​
  alert( str.endsWith("question.") );  // true
  alert( str.endsWith("to be") );      // false
  alert( str.endsWith("to be", 19) );  // true
  复制代码

6.字符串模式匹配

6.1 match

//语法 regexp 一个正则表达式对象  
//如果传入一个非正则表达式对象 regexp，则会使用 new RegExp(regexp) 隐式地将其转换为正则表达式对象。
str.match(regexp)
复制代码

• 查找一个或多个正则表达式的匹配 返回匹配的结果 （数组）

  注意 该方法返回符合匹配的值 存放在数组中，该方法依赖于regexp是否具有全局标志 g

  var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  var regexp = /[A-E]/gi;
  var matches_array = str.match(regexp);
  ​
  console.log(matches_array);
  // ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
  复制代码

6.2 search

//语法 regexp 一个正则表达式对象 
str.search(regexp)
复制代码

• 返回在字符串匹配成功的首次匹配项的索引，匹配不成功则返回 -1

  var str = "hey JudE";
  var re = /[A-Z]/g;
  var re2 = /[.]/g;
  console.log(str.search(re)); //  4
  console.log(str.search(re2)); //  -1
  复制代码

6.3 replace

// 语法 regexp|substr 正则或字符串。该正则所匹配的内容会被第二个参数所替换掉
//     newSubStr|function  用于替换掉第一个参数的字符串或函数的返回值 
str.replace(regexp|substr, newSubStr|function)
复制代码

• 返回 一个部分或全部匹配 替换所取代的新字符串 （不会改变原字符串）

  var str = 'Twas the night before Xmas...';
  var newstr = str.replace(/xmas/i, 'Christmas');
  console.log(newstr);  // Twas the night before Christmas...
  复制代码

7.字符串大小写转换

7.1 toLowerCase

（如果调用该方法的值不是字符串类型会被强制转换）

//语法 （如果调用该方法的值不是字符串类型会被强制转换）。
​
str.toLowerCase()
复制代码

• 调用该方法将字符串转换为小写形式 并不会影响原字符串

  console.log('中文简体 zh-CN || zh-Hans'.toLowerCase());
  // 中文简体 zh-cn || zh-hans
  ​
  •console.log( "ALPHABET".toLowerCase() );// "alphabet"
  ​
  复制代码

7.2 toUpperCase

（如果调用该方法的值不是字符串类型会被强制转换）

//语法 
str.toUpperCase()
复制代码

• 调用该方法将字符串转换为大写的字符串 返回一个新的字符串。并不会影响原字符串

  console.log('alphabet'.toUpperCase()); // 'ALPHABET'
  复制代码

8.移除字符串收尾空白符

8.1 trim

此方法不适用于 null undefined Number 类型

//语法 
str.trim()
复制代码

• 返回两头去掉空白符的字符串，并不影响原字符串本身

  var orig = '   foo  ';
  console.log(orig.trim()); // 'foo'
  ​
  // 另一个 .trim() 例子，只从一边删除
  ​
  var orig = 'foo    ';
  console.log(orig.trim()); // 'foo'
  复制代码

9.重复一个字符串

9.1 repeat

//语法 count 重复的次数
 str.repeat(count)
复制代码

• 返回 指定次数的新字符串副本

  var orig = 'foo';
  console.log(orig.repeat(2)); // 'foofoo'
  复制代码

10.字符串转为数字

10.1 parseInt

//语法 string 要解析的字符串   radinx 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间
 parseInt(string,radinx)
复制代码

• 从给定的字符串解析出一个整数

• 注意 parseInt将 BigInt转换为Number，并在这个过程中失去了精度。

  parseInt("10");       // 输出结果：10
  ​
  //如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN：
  parseInt("50", 1)      // 输出结果：NaN  
  ​
  //只有字符串中的第一个数字会被返回，当遇到第一个不是数字的字符为止:
  parseInt("40 4years")   // 输出结果：40
  ​
  //如果字符串的第一个字符不能被转换为数字，就会返回 NaN：
  parseInt("new100")     // 输出结果：NaN
  复制代码

10.2 parseFloat

//语法  string 需要被解析成为浮点数的值
parseFloat(string)
复制代码

• 给定值被解析成浮点数。如果给定值不能被转换成数值，则会返回 NaN。

• parseFloat解析 BigInt 为 Numbers, 丢失精度

  parseFloat("10.00")      // 输出结果：10.00
  parseFloat("10.01")      // 输出结果：10.01
  parseFloat("-10.01")     // 输出结果：-10.01
  parseFloat("40.5 years") // 输出结果：40.5。
  复制代码

• 如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。

  parseFloat("new40.5")    // 输出结果：NaN
  复制代码