JavaScript 字符串方法


目录

    显示目录

String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

笔记

字符串搜索方法将在下一章介绍。


JavaScript 字符串长度

length 属性返回字符串的长度:

例子

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>


提取字符串部分

有 3 种方法可以提取字符串的一部分:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript 字符串切片()

slice() 提取字符串的一部分并返回 提取新字符串中的部分。

该方法有 2 个参数:开始位置和结束位置(不包括结束位置)。

例子

切出字符串中从位置 7 到位置 13 的一部分:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part; 
</script>

</body>
</html>


笔记

JavaScript 从零开始计算位置。

第一个位置是 0。

第二个位置是 1。

例子

如果省略第二个参数,该方法将切出字符串的其余部分:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>


如果参数为负数,则从字符串末尾开始计算位置:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>


此示例从位置 -12 到位置 -6 切出字符串的一部分:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string and return the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>




JavaScript 字符串子串()

substring()slice() 类似。

不同之处在于,小于 0 的开始值和结束值被视为 0 substring()

例子

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>

</body>
</html>

如果省略第二个参数,substring() 将切出其余部分 细绳。


JavaScript 字符串 substr()

substr()slice() 类似。

区别在于 第二个参数指定长度 提取的部分。

例子

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>

</body>
</html>


如果省略第二个参数,substr() 将切出其余部分 细绳。

例子

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>

</body>
</html>


如果第一个参数为负数,则位置从末尾开始计算 细绳。

例子

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>

</body>
</html>



替换字符串内容

replace() 方法将指定值替换为另一个值 字符串中的值:

例子

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

自己尝试一下 →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>


笔记

replace() 方法不会更改调用它的字符串。

replace() 方法返回一个新字符串。

replace() 方法仅替换第一个匹配项

如果要替换所有匹配项,请使用设置了 /g 标志的正则表达式。请参阅下面的示例。

默认情况下,replace() 方法仅替换第一个匹配项:

例子

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>


默认情况下,replace() 方法区分大小写。编写 MICROSOFT(使用 大写)将不起作用:

例子

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("MICROSOFT","W3Schools");
}
</script>

<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>

</body>
</html>

要替换不区分大小写,请使用带有 /i 标志(不区分大小写)的正则表达式

例子

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/MICROSOFT/i,"W3Schools");
}
</script>

</body>
</html>


笔记

正则表达式不带引号编写。

要替换所有匹配项,请使用带有 /g 标志的正则表达式(全局匹配):

例子

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/Microsoft/g,"W3Schools");
}
</script>

</body>
</html>


笔记

您将在 JavaScript 正则一章中了解有关正则表达式的更多信息 表达式。


JavaScript 字符串 ReplaceAll()

2021 年,JavaScript 引入了字符串方法 replaceAll()

例子

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

replaceAll() 方法允许您指定一个 正则表达式而不是要替换的字符串。

如果参数是正则表达式,则必须设置全局标志(g),否则 抛出类型错误。

例子

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

笔记

replaceAll() 是 ES2021 功能。

replaceAll() 在 Internet Explorer 中不起作用。


转换为大小写

使用 toUpperCase() 将字符串转换为大写:

使用 toLowerCase() 将字符串转换为小写:


JavaScript 字符串 toUpperCase()

例子

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>

JavaScript 字符串 toLowerCase()

例子

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 
converted to lower

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toLowerCase();
}
</script>

</body>
</html>

JavaScript 字符串 concat()

concat() 连接两个或多个字符串:

例子

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The concat() Method</h2>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>


可以使用 concat() 方法代替加号运算符。 这两行的作用相同:

例子

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

笔记

所有字符串方法都返回一个新字符串。他们不会修改原始字符串。

正式表示:

字符串是不可变的:字符串不能更改,只能替换。


JavaScript 字符串修剪()

trim() 方法删除字符串两侧的空格:

例子

let text1 = "      Hello World!      ";
let text2 = text1.trim();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript 字符串修剪开始()

ECMAScript 2019 添加了 String 方法 trimStart() 到 JavaScript。 <p>trimStart() 方法的工作方式与 trim() 类似,但仅从开头删除空格一个字符串。

例子

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

自 2020 年 1 月起,所有现代浏览器均支持 JavaScript 字符串 trimStart()

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript 字符串修剪结束()

ECMAScript 2019 向 JavaScript 添加了字符串方法 trimEnd()。 <p>trimEnd() 方法的工作方式与 trim() 类似,但仅删除末尾的空格一个字符串。

例子

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

自 2020 年 1 月起,所有现代浏览器均支持 JavaScript 字符串 trimEnd()

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript 字符串填充

ECMAScript 2017 向 JavaScript 添加了两个新的字符串方法:padStart()padEnd() 支持字符串开头和结尾的填充。


JavaScript 字符串 padStart()

padStart() 方法从头开始填充字符串。

它用另一个字符串填充一个字符串(多次),直到达到给定长度。

例子

用“0”填充字符串,直到达到长度 4:

let text = "5";
let padded = text.padStart(4,"0");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

用“x”填充字符串,直到其长度达到 4:

let text = "5";
let padded = text.padStart(4,"x");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>

</body>
</html>

笔记

padStart() 方法是一个字符串方法。

要填充数字,请先将数字转换为字符串。

请参阅下面的示例。

例子

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>

</body>
</html>

浏览器支持

padStart() 是 ECMAScript 2017 功能。

所有现代浏览器都支持它:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Internet Explorer 不支持 padStart()


JavaScript 字符串 padEnd()

padEnd() 方法从末尾填充字符串。

它用另一个字符串填充一个字符串(多次),直到达到给定长度。

例子

let text = "5";
let padded = text.padEnd(4,"0");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
let text = "5";
let padded = text.padEnd(4,"x");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

笔记

padEnd() 方法是一个字符串方法。

要填充数字,请先将数字转换为字符串。

请参阅下面的示例。

例子

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

浏览器支持

padEnd() 是 ECMAScript 2017 的一项功能。

所有现代浏览器都支持它:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Internet Explorer 不支持 padEnd()


提取字符串字符

提取字符串字符有3种方法:

  • charAt(位置)

  • charCodeAt(位置)

  • 财产访问 [ ]


JavaScript 字符串 charAt()

charAt() 方法返回指定位置处的字符 字符串中的索引(位置):

例子

let text = "HELLO WORLD";
let char = text.charAt(0);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>

</body>
</html>


JavaScript 字符串 charCodeAt()

charCodeAt() 方法返回字符的 unicode 在字符串中的指定索引处:

该方法返回 UTF-16 代码(0 到 65535 之间的整数)。

例子

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>

</body>
</html>


物业使用

ECMAScript 5 (2009) 允许对字符串进行属性访问 [ ]:

例子

let text = "HELLO WORLD";
let char = text[0];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>

<p>The first character in the string is:</p>
<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>

笔记

财产访问可能有点不可预测:

  • 它使字符串看起来像数组(但事实并非如此)

  • 如果未找到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。

  • 它是只读的。 str[0]="A" 没有给出错误(但不起作用!)

例子

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";

text[0] = "A";  // Does not work

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

将字符串转换为数组

如果您想将字符串作为数组使用,可以将其转换为数组。

JavaScript 字符串 split()

可以使用 split() 方法将字符串转换为数组:

例子

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>

<p id="demo"></p>

<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>

</body>
</html>


如果省略分隔符,则返回的数组将包含整个字符串 在索引[0]中。

如果分隔符为“”,则返回的数组将为单个数组 人物:

例子

text.split("")

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>

<p id="demo"></p>

<script>
let text = "Hello";
const myArr = text.split("");

text = "";
for (let i = 0; i < myArr.length; i++) {
  text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>


完整的字符串参考

有关完整的字符串参考,请访问我们的:

完整的 JavaScript 字符串参考。

该参考包含所有字符串属性和方法的描述和示例。