indexOf()
方法返回 index (位置) 字符串中第一次出现的字符串:
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>
<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
JavaScript 从零开始计算位置。
0 是 a 中的第一个位置 字符串,1 是第二个,2 是第三个,...
lastIndexOf()
方法返回 last 的 index 字符串中指定文本的出现:
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>
<p>The position of the last occurrence of "locate" is:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
indexOf()
和 lastIndexOf()
都返回 -1 如果找不到文本:
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>
<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
两种方法都接受第二个参数作为起始位置 搜索:
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>
<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
lastIndexOf()
方法向后搜索 (从结尾到开头),意思是: 如果第二个参数是15
,则搜索从位置开始 15,并搜索到字符串的开头。
let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>
<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
search()
方法在字符串中搜索字符串(或正则表达式) 并返回匹配的位置:
let text = "Please locate where 'locate' occurs!";
text.search("locate");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>
<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
let text = "Please locate where 'locate' occurs!";
text.search(/locate/);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>
<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>
<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>
indexOf()
和 search()
这两个方法相等?
他们接受相同的参数(参数),并返回相同的值?
这两种方法不相同。这些是差异:
search()
方法不能采用第二个起始位置参数。
indexOf()
方法不能采用 强大的搜索值(正则表达式)。
您将了解更多有关 正则表达式将在后面的章节中介绍。
match()
方法返回一个包含匹配结果的数组 字符串与字符串(或正则表达式)。
搜索“ain”:
let text = "The rain in SPAIN stays mainly in the plain";
text.match("ain");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>
<p>Perform a search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>
搜索“ain”:
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>
<p>Perform a search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>
对“ain”执行全局搜索:
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>
<p>Perform a global search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>
对“ain”执行全局、不区分大小写的搜索:
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>
<p>Perform a global, case-insensitive search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>
</body>
</html>
如果正则表达式不包含 g 修饰符(全局搜索), match()
将仅返回字符串中的第一个匹配项。
在 JS RegExp 一章中了解有关正则表达式的更多信息。
matchAll()
方法返回一个包含匹配结果的迭代器 字符串与字符串(或正则表达式)。
const iterator = text.matchAll("Cats");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
如果参数是正则表达式,则必须设置全局标志(g),否则 抛出类型错误。
const iterator = text.matchAll(/Cats/g);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
如果要搜索不区分大小写,则必须设置不敏感标志 (i):
const iterator = text.matchAll(/Cats/gi);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
matchAll()
是 ES2020 功能。
matchAll()
在 Internet Explorer 中不起作用。
如果字符串包含指定值,则 includes()
方法返回 true。
否则返回 false
。
检查字符串是否包含“world”:
let text = "Hello world, welcome to the universe.";
text.includes("world");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>
<p>Check if a string includes "world":</p>
<p id="demo"></p>
<p>The includes() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>
检查字符串是否包含“world”。从位置 12 开始:
let text = "Hello world, welcome to the universe.";
text.includes("world", 12);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>
<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>
<p>The includes() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>
</body>
</html>
includes()
区分大小写。
includes()
是 ES6 功能。
Internet Explorer 不支持 includes()
。
startsWith()
方法返回 true
如果字符串以指定值开头。
否则返回 false
:
返回真:
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>
</body>
</html>
返回错误:
let text = "Hello world, welcome to the universe.";
text.startsWith("world")
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>
</body>
</html>
可以指定搜索的起始位置:
返回错误:
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>
</body>
</html>
返回真:
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p id="demo"></p>
<p>The startsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>
</body>
</html>
startsWith()
区分大小写。
startsWith()
是 ES6 功能。
Internet Explorer 不支持 startsWith()
。
endsWith()
方法返回 true
如果字符串以指定值结尾。
否则返回 false
:
检查字符串是否以“Doe”结尾:
let text = "John Doe";
text.endsWith("Doe");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Check if a string ends with "Doe":</p>
<p id="demo"></p>
<p>The endsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>
</body>
</html>
检查字符串的前 11 个字符是否以“world”结尾:
let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Check in the 11 first characters of a string ends with "world":</p>
<p id="demo"></p>
<p>The endsWith() method is not supported in Internet Explorer.</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>
</body>
</html>
endsWith()
区分大小写。
endsWith()
是 ES6 功能。
Internet Explorer 不支持 endsWith()
。
有关完整的字符串参考,请访问我们的:
完整的 JavaScript 字符串参考。
该参考包含所有字符串属性和方法的描述和示例。