【JavaScript】图解JS中的字符串方法

💯 欢迎光临清清ww的博客小天地💯

🔥 个人主页:【清清ww】🔥

📚 系列专栏:vue3 | TypeScript 📚

🌟 学习本无底，前进莫徬徨。🌟

一.字符串查找

1.length属性

2. indexOf( )方法

3.lastIndexOf（）方法

4.search（）方法

二.提取字符串

1.slice（）方法

2.subString（）方法

3.substr（）方法

三.替换字符串内容

replace（）方法

四，大小写转换

1.toUpperCase（）方法

2.toLowerCase（）方法

五.连接字符串

concat（）方法

六.删除两端空白符

trim（）方法

七.提取字符串字符

1.charAt（）方法

2.charCodeAt（）方法

八.把字符串转换为数组

split（）方法

一.字符串查找

1.length属性

字符串长度。从1开始计数。

注意索引是从0开始的，但是长度是从1开始的。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var txt = "零一二三四五六";
document.getElementById("demo").innerHTML = txt.length; // 输出7
</script></body>
</html>

2. indexOf( )方法

查找字符串中的字符串，返回第一个匹配项的位置，如果未找到则返回-1。

可接受两个参数:待查字符串、检索起始位置。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
document.getElementById("demo").innerHTML = pos; // 输出17
</script></body>
</html>

3.lastIndexOf（）方法

返回指定文本在字符串中最后一次出现的索引，如果未找到则返回-1。

可接受两个参数:待查字符串、检索起始位置。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
document.getElementById("demo").innerHTML = pos;
</script></body>
</html>

检索起始位置：

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
document.getElementById("demo").innerHTML = pos; // 输出17
</script></body>
</html>

有意思的是，当我们把索引位置改为“17”，返回的仍旧是“17”而不是“-1” 。因为虽然 "hina" 部分在位置 17 之后，但是完整的子字符串 "China" 在位置 17 处是完全匹配的，所以返回“17”。

4.search（）方法

搜索特定值的字符串，并返回匹配的位置。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");
document.getElementById("demo").innerHTML = pos; // 输出17
</script></body>
</html>

它和indexOf很像，但两种方法并不完全相等的。

search() 方法无法设置第二个开始位置参数，但可以设置更强大的搜索值（正则表达式）。

<!DOCTYPE html>
<html>
<body><h1>JavaScript 字符串方法</h1><p>search() 方法使用正则表达式来查找字符串中的模式：</p><p id="demo"></p><script>
var str = "Visit W3Schools! Visit Microsoft!";
var n = str.search(/W3Schools/i); // 使用正则表达式，'i' 表示不区分大小写
document.getElementById("demo").innerHTML = n; // 输出6
</script></body>
</html>

二.提取字符串

1.slice（）方法

提取字符串的某个部分，并在新字符串中返回被提取的部分。

接受两个参数（开始位置，结束位置）

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "Apple,Banana,Mango";
var res = str.slice(6,12);
document.getElementById("demo").innerHTML = res; // 输出Banana
</script></body>
</html>

如果某个参数为负，则从字符串的结尾开始计数。

原字符串仍然存在且未发生任何改变，只是生成了一个新的字符串。

2.subString（）方法

与slice（）方法类似，但是该方法不能接受负的索引。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "Apple,Banana,Mango";
var res = str.substring( 0,5);
document.getElementById("demo").innerHTML = res; // 输出Apple
</script></body>
</html>

3.substr（）方法

与slice（）方法类似，但是该方法的第二个参数指的是被提取部分的长度。

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "Apple,Banana,Mango";
var res = str.substr(6,6);
document.getElementById("demo").innerHTML = res; // 输出Banana
</script></body>
</html>

如果省略第二个参数，则将从起始位置开始，裁剪字符串的剩余部分。

如果首个参数为负，则从字符串的结尾计算位置。

三.替换字符串内容

replace（）方法

用另一个值替换在字符串中指定的值。第一个参数为想取代的值，第二个参数为新值。

<!DOCTYPE html>
<html>
<body><p>来客人了，记得把“oldApple”替换为“newApple”：</p><button onclick="myFunction()">点击换新苹果</button><p id="demo">请吃oldApple！</p><script>
function myFunction() {var str = document.getElementById("demo").innerHTML; var txt = str.replace("oldApple","newApple");document.getElementById("demo").innerHTML = txt;
}
</script></body>
</html>

运行结果：

replace（）方法不会改变调用它的字符串。它返回的是新字符串。

（1）默认只替换首个匹配到的

如需替换所有匹配，可以使用正则表达式的 g 标志（用于全局搜索）。注意正则表达式不带引号。

str = "请吃oldApple,oldApple,oldApple";
var n = str.replace(/oldApple/g, "newApple");

（2）对大小写敏感。

<!DOCTYPE html>
<html>
<body><p>来客人了，记得把“oldApple”替换为“newApple”：</p><button onclick="myFunction()">点击换新苹果</button><p id="demo">请吃oldApple！</p><script>
function myFunction() {var str = document.getElementById("demo").innerHTML; var txt = str.replace("OLDAPPLE","newApple");document.getElementById("demo").innerHTML = txt; // 替换失败
}
</script></body>
</html>

如需执行大小写不敏感的替换，可以使用正则表达式 i（大小写不敏感）。

str = "请吃oldApple";
var n = str.replace(/OLDAPPLE/i, "newApple");

四，大小写转换

1.toUpperCase（）方法

把字符串转换为大写

<!DOCTYPE html>
<html>
<body><p>把字符串转换为大写：</p><button onclick="myFunction()">点击转换为大写</button><p id="demo">Hello World!</p><script>
function myFunction() {var text = document.getElementById("demo").innerHTML;document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script></body>
</html>

运行结果：

2.toLowerCase（）方法

把字符串转换为小写

<!DOCTYPE html>
<html>
<body><p>把字符串转换为小写：</p><button onclick="myFunction()">点击转换为小写</button><p id="demo">HELLO World!</p><script>
function myFunction() {var text = document.getElementById("demo").innerHTML;document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script></body>
</html>

运行结果：

五.连接字符串

concat（）方法

连接两个或多个字符串

<!DOCTYPE html>
<html>
<body><p>concat() 方法连接两个或多个字符串：</p><p id="demo"></p><script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script></body>
</html>

六.删除两端空白符

trim（）方法

删除字符串两端的空白符

<!DOCTYPE html>
<html>
<body><p>点击这个按钮来输出已删除空白字符的字符串。</p><button onclick="myFunction()">试一试</button><script>
function myFunction() {var str = "     Hello World!     ";alert(str.trim()); // 弹出Hello World!
}
</script></body>
</html>

七.提取字符串字符

1.charAt（）方法

返回字符串中指定下标（位置）的字符串

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0); // 输出H
</script></body>
</html>

2.charCodeAt（）方法

与charAt（）类似，只是返回的字符串中指定位置的字符 unicode 编码。

八.把字符串转换为数组

split（）方法

把字符串转换为数组

<!DOCTYPE html>
<html>
<body><p>单击“试一试”以显示字符串拆分后的数组。</p><button onclick="myFunction()">试一试</button><p id="demo"></p><script>
function myFunction() {var str = "a,b,c,d,e,f";var arr = str.split(",");document.getElementById("demo").innerHTML = arr;
}
</script></body>
</html>

运行结果：

🚀感谢您的细心品读，完成了这篇关于【JavaScript】图解JS中的字符串方法 的旅程。 🚀

🎉 您的每一个鼓励都是我不断更新的动力，不要忘记点赞收藏🎉

🔍 期待与您一同深入前端技术的海洋，共同探索那些未知的宝藏，揭开Web开发的层层迷雾。🔍

🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟