【JavaScript】图解JS中的字符串方法
💯 欢迎光临清清ww的博客小天地💯
🔥 个人主页:【清清ww】🔥
📚 系列专栏:vue3 | TypeScript 📚
🌟 学习本无底，前进莫徬徨。🌟
目录
一.字符串查找
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开发的层层迷雾。🔍
🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟
原文地址：https://blog.csdn.net/m0_59873661/article/details/144057224
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！