JavaScript字符串常用方法详解：查找、提取、替换与转换

作者：开源拾贝时间：2026-11-01 03:58:45浏览：220

本文详细解析JavaScript中字符串的常用操作方法，涵盖长度获取、查找定位（indexOf、lastIndexOf、search）、提取子串（slice、substring、substr）、内容替换（replace）、大小写转换及字符提取等核心功能，通过代码示例说明各方法的参数与返回值，帮助开发者高效处理字符串数据。

一、字符串查找

1. length 属性

用于获取字符串的长度，计数从 1 开始。

需要注意的是，字符串索引从 0 开始计数，而长度属性 length 返回的是从 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中字符串方法内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

JS 怎么使用 pako.js 解压 gzip 数据流

2026-11-05 15:54:33

零基础先学JavaScript还是Python？对比学习难度与上手曲线

2026-11-05 14:47:40

JS代码反混淆：主流在线工具与本地软件推荐

2026-11-04 19:28:41

浏览器控制台查看格式化JSON有哪些实用技巧

2026-11-04 16:56:53

JS控制台打印基础：console.log语法与多参数用法

2026-11-04 09:23:11