前端H5面试题Js：JavaScript字符串的常用方法有哪些？

article/2025/10/9 14:55:25

一、前言：

可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变。

二、增

增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作，除了常用+以及${}进行字符串拼接之外，还可通过concat。

1. concat() 用于将一个或多个字符串拼接成一个新字符串

    <script>function demoConcat() {var str = "hello ";var ret = str.concat("world");console.log(ret); //hello worldconsole.log(str); //hello}demoConcat()</script>

三、删

删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作。

1. slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串(取头不取尾)

    <script>function demoSlice() {var str = '希望大海风平浪静,却常常有狂风和恶浪。'console.log(str.slice(1, 8)); // 输出：望大海风平浪静console.log(str.slice(4, -2)); // 输出：风平浪静,却常常有狂风和恶console.log(str.slice(12)); // 输出：有狂风和恶浪。console.log(str.slice(30)); // 输出：""}demoSlice()</script>

2. substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集(含头不含尾)

    <script>function demoSubstring() {var str = "我愿意为你放弃曾经那些年少轻狂";console.log(str.substring(0, 3)); //我愿意console.log(str.substring(3, 7)); //为你放弃console.log(str.substring(3, 3)); //""console.log(str.substring(0, 15)); //我愿意为你放弃曾经那些年少轻狂}demoSubstring()</script>

四、改

改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

1. replace() 替换出现的第一处与 replaceAll() 全部替换

    <script>function demoReplace() {var str = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";//将第一个dog替换为monkey// console.log(str.replace('dog', 'monkey'));//将第一个dog替换为 李沁var newStr = str.replace("dog", function (replacement) {return "李沁"})console.log(newStr); //The quick brown fox jumps over the lazy 李沁. //If the dog reacted, was it really lazy?// 将所有dog替换为 李沁var newStr2 = str.replaceAll("dog", function (replacement) {return "李沁"})console.log(newStr2); //The quick brown fox jumps over the lazy 李沁. //If the 李沁 reacted, was it really lazy?}demoReplace() </script>

2. split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组

    <script>function demoSplit() {var str = 'The quick brown fox jumps over the lazy dog.';var words = str.split(' ');console.log(words);//['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']//将目标字符串拆分为每个字符形成的数组var chars = str.split('');console.log(chars); //['T', 'h', 'e', ' ', 'q', ...'d', 'o', 'g', '.']//将str拆分为长度为1的数组 唯一的那个元素是str本身var strCopy = str.split();console.log(strCopy);// ["The quick brown fox jumps over the lazy dog."]//对拆分的结果取前5个元素chars = str.split('', 5);console.log(chars); //['T', 'h', 'e', ' ', 'q']}demoSplit()</script>

3. 修剪掉字符串头尾的空白 trim()

修剪掉字符串尾部的空白 trimEnd()

修剪掉字符串头部的空白 trimStart()

4. toUpperCase()、toLowerCase() 转换大小写

    <script>function demoToCase() {var sentence = 'The quick brown fox jumps over the lazy dog.';console.log(sentence.toUpperCase()); //THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.console.log(sentence.toLowerCase()); //the quick brown fox jumps over the lazy dog.}demoToCase()</script>

五、查

除了通过索引的方式获取字符串的值，还可通过：

1. charAt() 方法从一个字符串中返回指定的字符

    <script>function demoCharAt() {var str = "我愿意为你放弃曾经那些年少轻狂";console.log(str.length); //15for (let i = 0; i < str.length; i++) {console.log(str.charAt(i));}}// demoCharAt()</script>

2. indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

    <script>function demoIndexOf() {var str = "我愿意为你放弃曾经你那些年少轻狂";var result = str.indexOf("你");console.log(result); //4var ret = str.indexOf("你", 5);console.log(ret); //9}demoIndexOf()</script>

3. includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

    <script>function demoIncludes() {var str = "希望大海风平浪静,却常常有狂风和恶浪。"console.log(str.includes("浪静"));//trueconsole.log(str.includes("上海"));//falseconsole.log(str.indexOf("浪静") != -1);//trueconsole.log(str.indexOf("上海") != -1);//false}demoIncludes()</script>