28个JavaScript常用字符串方法以及使用技巧总结

1. 字符串长度

通过 length 属性可以获取字符串的长度。

const str = 'Hello World';
console.log(str.length); // 11

2. 字符串截取

常见的字符串截取方式为 substring 和 slice，两者用法类似，都是根据起始位置和结束位置截取字符串，区别在于当起始位置大于结束位置时，substring 方法会自动调换这两个参数，而 slice 方法则返回空字符串。

const str = 'Hello World';
console.log(str.substring(0, 5)); // "Hello"
console.log(str.slice(0, 5)); // "Hello"
console.log(str.substring(5, 0)); // "Hello"
console.log(str.slice(5, 0)); // ""

3. 字符串分割

可以通过 split 方法根据指定的分隔符将字符串分割成数组。

const str = 'item1,item2,item3';
console.log(str.split(',')); // ["item1", "item2", "item3"]

4. 字符串替换

可以通过 replace 方法将指定字符替换为其他字符。

const str = 'Hello World';
console.log(str.replace('World', 'JavaScript')); // "Hello JavaScript"

5. 字符串大小写转换

可以通过 toUpperCase 和 toLowerCase 方法将字符串分别转换成大写和小写。

const str = 'Hello World';
console.log(str.toUpperCase()); // "HELLO WORLD"
console.log(str.toLowerCase()); // "hello world"

6. 字符串去空格

可以通过 trim 方法去除字符串两端的空格。此外，也可以使用 trimStart 和 trimEnd 分别去除字符串开头和结尾的空格。

const str = ' Hello World   ';
console.log(str.trim()); // "Hello World"
console.log(str.trimStart()); // "Hello World   "
console.log(str.trimEnd()); // " Hello World"

7. 匹配字符串开头和结尾

可以使用 startsWith 和 endsWith 方法判断字符串是否以指定的字符开头或结尾。

const str = 'Hello World';
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('World')); // true

8. 子字符串位置查找

可以使用 indexOf 和 lastIndexOf 方法查找一个子字符串在字符串中第一次出现和最后一次出现的位置。

const str = 'Hello World';
console.log(str.indexOf('o')); // 4
console.log(str.lastIndexOf('o')); // 7

9. 字符串是否包含指定字符

可以使用 includes 方法判断一个字符串是否包含指定的字符。

const str = 'Hello World';
console.log(str.includes('World')); // true

10. 使用正则表达式查找匹配

可以使用 search 方法和正则表达式来查找匹配的位置。

const str = 'Hello World';
console.log(str.search(/o/)); // 4

11. 字符串重复

可以使用 repeat 方法将一个字符串重复多次。

const str = 'Hello';
console.log(str.repeat(3)); // "HelloHelloHello"

12. 字符串拼接

可以使用 concat 方法将多个字符串拼接在一起。

const str1 = 'Hello';
const str2 = 'World';
console.log(str1.concat(' ', str2)); // "Hello World"

13. 原始值与字符串转换

可以使用 toString 方法将原始值转换成字符串。

const num = 123;
console.log(num.toString()); // "123"

14. ASCII码与字符转换

可以使用 charCodeAt 方法将一个字符转换成 ASCII 码，也可以使用 fromCharCode 方法将 ASCII 码转换成字符。

const str = 'A';
console.log(str.charCodeAt(0)); // 65
console.log(String.fromCharCode(65)); // "A"

15. 字符串模板

可以使用模板字符串的方式来拼接字符串，使用 ${} 包含变量。

const str = 'JavaScript';
console.log(`Hello ${str}`); // "Hello JavaScript"

16. 重复字符串占位符

可以使用 padStart 和 padEnd 方法来给字符串添加前缀或后缀使其固定长度，如果指定的长度小于当前字符串的长度，则不做任何操作。

const str = 'Hello';
console.log(str.padStart(8, '*')); // "***Hello"
console.log(str.padEnd(8, '*')); // "Hello***"

17. 根据函数返回值替换字符串

可以使用 replace 方法的第二个参数为函数的方式，根据函数的返回值替换字符串中的内容。

const str = 'abc1def2gh3ij4kl';
const result = str.replace(/\d+/g, function(match) {
  return parseInt(match) + 1;
});
console.log(result); // "abc2def3gh4ij5kl"

18. 字符串的字节长度

可以使用 encodeURI 方法对字符串进行编码，并获取其字节长度。

const str = '你好，世界';
console.log(encodeURI(str).replace(/%../g, 'x').length); // 10

19. URL编码与解码

可以使用 encodeURIComponent 和 decodeURIComponent 方法来对URL进行编码和解码操作。

const url = 'http://www.example.com?name=张三&age=20';
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // "http%3A%2F%2Fwww.example.com%3Fname%3D%25E5%25BC%25A0%25E4%25B8%2589%26age%3D20"
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl); // "http://www.example.com?name=张三&age=20"

20. 字符串转换为数组

可以使用 Array.from 方法将一个字符串转换成数组。

const str = 'Hello World';
console.log(Array.from(str)); // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

21. 使用字符串遍历器

可以使用 for...of 循环遍历一个字符串。

const str = 'Hello World';
for (let s of str) {
  console.log(s);
}

22. 字符串的解构赋值

可以使用解构赋值的方式快速将字符串转换成数组。

const [a, b, c] = 'abc';
console.log(a); // "a"
console.log(b); // "b"
console.log(c); // "c"

23. 多个分隔符分割字符串

可以使用正则表达式和 split 方法来实现多个分隔符分割字符串。

const str = 'item1,item2;item3 item4';
console.log(str.split(/,|;|\s+/)); // ["item1", "item2", "item3", "item4"]

24. 缓存字符串变量

可以使用模板字符串的方式缓存字符串变量，避免多次连接字符串。

const str1 = 'Hello';
const str2 = 'World';
const cachedStrs = `str1 is ${str1}, and str2 is ${str2}`;
console.log(cachedStrs); // "str1 is Hello, and str2 is World"

25. 字符串数组排序

可以使用 localeCompare 方法对数组中的字符串进行排序。

const arr = ['Tom', 'Andy', '张三', '李四'];
arr.sort(function(a, b) {
  return a.localeCompare(b, 'zh');
});
console.log(arr); // ["Andy", "Tom", "李四", "张三"]

26. 多行字符串

可以使用模板字符串的方式实现多行字符串，也可以使用 \ 换行符实现多行字符串。

const str1 = `Hello
            World`;
console.log(str1); // "Hello
                  // World"
const str2 = 'Hello\nWorld';
console.log(str2); // "Hello
                  // World"

27. 十六进制转换为字符串

可以使用 String.fromCharCode 方法将十六进制转换为字符串。

const hexStr = '48656c6c6f20576f726c64';
const charCodeArr = [];
for (let i = 0; i < hexStr.length; i += 2) {
  charCodeArr.push(parseInt(hexStr.slice(i, i + 2), 16));
}
const str = String.fromCharCode(...charCodeArr);
console.log(str); // "Hello World"

28. 字符串大小写互换

可以使用 toUpperCase 和 toLowerCase 方法配合运算符 ^ 互换大小写。

const str = 'Hello World';
const convertedStr = str.replace(/[a-z]/gi, function(s) {
  return s === s.toUpperCase() ? s.toLowerCase() : s.toUpperCase();
});
console.log(convertedStr); // "hELLO wORLD"

示例1：将一个字符串中的所有数字加1。

const str = 'abc1def2gh3ij4kl';
const result = str.replace(/\d+/g, function(match) {
  return parseInt(match) + 1;
});
console.log(result); // "abc2def3gh4ij5kl"

示例2：将一个字符串中的所有空格去除，并将英文单词首字母大写。

const str = '    hello     world   ';
const result = str.trim().replace(/\b\w+\b/g, function(s) {
  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
});
console.log(result); // "Hello World"