JavaScript 与 HTML/CSS 文件的关系，特别是与文档对象模型 (DOM) 的关系，通过名为“jQuery”的开源库变得更加容易。 HTML 文件的遍历和操作、浏览器事件的控制、DOM 视觉效果的生成、Ajax 连接的便利以及跨平台 JavaScript 编程都通过这个包变得更加容易。
为了验证特定字符串是否构成另一个字符串的子字符串，JavaScript 提供了多种字符串函数。因此，jQuery 对于完成这项任务来说是可有可无的。
尽管如此，我们仍将阐述验证一个字符串是否以另一个字符串开始或终止的各种方法：
startsWith() 和endsWith() 方法
search() 方法
indexOf() 方法
substring() 方法
substr() 方法
slice() 方法
假设我们有一个字符串，str = "Hi, how are you?"我们的任务是确定它是否以 startword = “Hi” 开头并以 endword = “?” 结束。
方法1-str.startsWith()
JavaScript 中的 str.startsWith() 方法用于验证给定字符串中的字符是否为指定字符串的开头。此技术区分大小写，这意味着它区分大写字母和小写字母。
上述方法承认两个参数，如前所述，如下所述：
searchString：构成强制参数，存储需要搜索的字符串。
start：它在所提供的字符串中建立要从中查找 searchString 的位置。默认值为零。
语法
str.startsWith( searchString , position )
示例
function func() {
var str = 'Hi, how are you?';
var value = str.startsWith('Hi');
console.log(value);
}
func();
输出
true
方法2-endsWith()
要确定提供的字符串是否以另一个字符串中的字符结尾，请使用 JavaScript 方法 str.endsWith()。
上述方法采用前面提到的两个参数，如下所述：
searchString：表示需要在给定字符串末尾查找的字符串。
length：长度参数确定要检查搜索字符串的原始字符串的大小。
当执行该函数时，如果找到searchString，则返回布尔值true；否则，返回 false。
示例
function func() {
var str = 'Hi, how are you?';
var value = str.startsWith('you?');
console.log(value);
}
func();
输出
false
方法3 - string.search()
JavaScript string.search() 方法是一个内置函数，用于搜索正则表达式和指定字符串对象之间的匹配项。
语法
string.search( A )
示例
var string = "Hi, how are you?"; var re1 = /s/; var re2 = /3/; var re3 = / /; var re4 = /, /; console.log(string.search(re1)); console.log(string.search(re2)); console.log(string.search(re3)); console.log(string.search(re4));
输出
-1 -1 3 2
方法4：字符串indexOf()
JavaScript 中的 str.indexOf() 函数发现给定字符串中所提供字符串参数的第一个实例的索引。结果是从 0 开始的。
语法
str.indexOf(searchValue , index)
示例
function func() {
var str = 'Hi, How are you?';
var index = str.indexOf('are');
console.log(index);
}
func();
输出
8
方法五：字符串substring()
JavaScript string.substring() 方法是一个内置函数，它返回给定字符串的一部分，从指定的开始索引开始到提供的结束索引结束。此方法中的索引从零 (0) 开始。
语法
string.substring(Startindex, Endindex)
参数 Startindex 和 Endindex 确定要提取为子字符串的字符串段。 Endindex 参数是可选的。
当执行 string.substring() 函数时，它会创建一个代表原始字符串一部分的新字符串。
示例
var string = "Hi, how are you?"; a = string.substring(0, 4) b = string.substring(1, 6) c = string.substring(5) d = string.substring(0) console.log(a); console.log(b); console.log(c); console.log(d);
输出
Hi, i, ho ow are you? Hi, how are you?
方法六：字符串substr()
JavaScript 中的 str.substr() 方法允许您从给定字符串中从指定索引开始提取特定数量的字符。该方法有效地提取了原始字符串的一段。
语法
str.substr(start , length)
示例
function func() {
var str = 'Hi, how are you?';
var sub_str = str.substr(5);
console.log(sub_str);
}
func();
输出
ow are you?
方法七：string.slice()
JavaScript string.slice() 方法用于提取所提供的输入字符串的一部分或切片并将其作为新字符串返回。
语法
string.slice(startingIndex, endingIndex)
示例
var A = 'Hi, How are you?'; b = A.slice(0,5); c = A.slice(6,9); d = A.slice(0); console.log(b); console.log(c); console.log(d);
输出
Hi, H w a Hi, How are you?
示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery Methods Demo</title>
<style>
/* CSS Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
h2 {
margin-top: 30px;
}
p {
margin: 10px 0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.output {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var text = "Hello, World!";
$("#textContent").text(text);
// startsWith() method
$("#startsWithBtn").click(function() {
var result = text.startsWith("Hello");
$("#startsWithOutput").text(result);
});
// endsWith() method
$("#endsWithBtn").click(function() {
var result = text.endsWith("World!");
$("#endsWithOutput").text(result);
});
// search() method
$("#searchBtn").click(function() {
var searchTerm = $("#searchTerm").val();
var result = text.search(searchTerm);
$("#searchOutput").text(result);
});
// indexOf() method
$("#indexOfBtn").click(function() {
var searchTerm = $("#indexOfTerm").val();
var result = text.indexOf(searchTerm);
$("#indexOfOutput").text(result);
});
// substring() method
$("#substringBtn").click(function() {
var start = $("#substringStart").val();
var end = $("#substringEnd").val();
var result = text.substring(start, end);
$("#substringOutput").text(result);
});
// substr() method
$("#substrBtn").click(function() {
var start = $("#substrStart").val();
var length = $("#substrLength").val();
var result = text.substr(start, length);
$("#substrOutput").text(result);
});
// slice() method
$("#sliceBtn").click(function() {
var start = $("#sliceStart").val();
var end = $("#sliceEnd").val();
var result = text.slice(start, end);
$("#sliceOutput").text(result);
});
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery Methods Demo</h1>
<h2>Text Content</h2>
<p id="textContent"></p>
<h2>startsWith() Method</h2>
<button id="startsWithBtn">Check if the text starts with "Hello"</button>
<p>Result: <span id="startsWithOutput" class="output"></span></p>
<h2>endsWith() Method</h2>
<button id="endsWithBtn">Check if the text ends with "World!"</button>
<p>Result: <span id="endsWithOutput" class="output"></span></p>
<h2>search() Method</h2>
<input type="text" id="searchTerm" placeholder="Enter search term">
<button id="searchBtn">Search</button>
<p>Result: <span id="searchOutput" class="output"></span></p>
<h2>indexOf() Method</h2>
<input type="text" id="indexOfTerm" placeholder="Enter search term">
<button id="indexOfBtn">Find index</button>
<p>Result: <span id="indexOfOutput" class="output"></span></p>
<h2>substring() Method</h2>
<input type="text" id="substringStart" placeholder="Enter start index">
<input type="text" id="substringEnd" placeholder="Enter end index">
<button id="substringBtn">Get substring</button>
<p>Result: <span id="substringOutput" class="output"></span></p>
<h2>substr() Method</h2>
<input type="text" id="substrStart" placeholder="Enter start index">
<input type="text" id="substrLength" placeholder="Enter length">
<button id="substrBtn">Get substring</button>
<p>Result: <span id="substrOutput" class="output"></span></p>
<h2>slice() Method</h2>
<input type="text" id="sliceStart" placeholder="Enter start index">
<input type="text" id="sliceEnd" placeholder="Enter end index">
<button id="sliceBtn">Get slice</button>
<p>Result: <span id="sliceOutput" class="output"></span></p>
</div>
</body>
</html>
说明
所提供的 HTML 脚本使用值“Hello, World!”来初始化文本变量。并使用 JavaScript 将其输出到网站上。它创建与各种 jQuery 函数相关的按钮事件处理程序。这些按钮各自的方法在单击时被触发，并且输出组件显示结果。 “Hello”字符是startsWith() 方法查找的第一个字符。 endsWith() 方法确定字符串是否以“World!”结尾。当在文本中搜索用户提供的短语时，search() 方法会提供第一次出现的索引。可以使用 indexOf() 方法找到文本中用户提供的短语的索引。使用用户提供的开始和结束索引，substring()、substr() 和 slice() 函数从文本中提取子字符串。一般来说，网页的文本变量是使用 jQuery 技术和 JavaScript 代码来操作和检查的，这也允许用户参与。
结论
JavaScript 提供了一系列字符串函数来验证一个字符串是否是另一个字符串的子字符串。
JavaScript str.startsWith() 方法用于检查指定字符串是否以所提供字符串中的字符开头。此方法区分大小写，这意味着它区分大小写字母。
JavaScript 使用 str.endsWith() 函数来确定给定字符串是否以所提供字符串中的字符结尾。
JavaScript 提供了一个名为 string.search() 的内置方法，用于搜索给定字符串对象和正则表达式之间的匹配项。
JavaScript 的 str.indexOf() 函数查找所提供的字符串参数在所提供的字符串中第一次出现的索引。结果是零基础的。
JavaScript 函数 string.substring() 检索所提供字符串的一部分，从开始索引开始到结束索引结束。索引从位置零开始。
JavaScript str.substr() 方法从提供的字符串中提取从预定索引开始的预定数量的字符。本质上，该技术提取原始字符串的一部分。
可以使用 JavaScript string.slice() 方法提取给定输入字符串的一部分或切片，该方法将提取的部分作为新字符串返回。
