通过图文详细讲解JavaScript中的字符串方法
作者：清清ww
这篇文章主要介绍了JavaScript中字符串方法的相关资料,文中包括字符串长度、查找字符串、提取字符串、替换字符串、大小写转换、连接字符串、删除空白符、提取字符以及字符串转数组等方法,需要的朋友可以参考下
一.字符串查找
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中字符串方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！