ES12 中的 String.startsWith 和 String.endsWith

在前端开发中，经常需要对字符串进行处理。ES6 引入了一些新的字符串方法，比如 startsWith() 和 endsWith()，可以更方便地处理字符串的首尾信息。

ES12 中的 String.startsWith() 和 String.endsWith() 进一步完善了这两个方法，并提供了更好的兼容性。本文将介绍 ES12 中的这两个方法的使用，具体的示例代码将帮助读者更好地理解这些新的特性。

String.startsWith()

String.startsWith() 方法返回一个布尔值，表示一个字符串是否以另一个字符串开头。下面是这个方法的标准语法：

str.startsWith(searchString[, position])

其中，str 是要检查的字符串，searchString 是要搜索的字符串，position 是可选的参数，表示从 str 的哪个位置开始匹配。如果不传第二个参数，则默认从索引 0 开始匹配。

下面是一个示例代码:

const str = 'hello world';
const isStartsWith = str.startsWith('hello');

console.log(isStartsWith); // true

String.endsWith()

String.endsWith() 方法同样返回一个布尔值，表示一个字符串是否以另一个字符串结尾。下面是这个方法的标准语法：

str.endsWith(searchString[, length])

其中，str 是要检查的字符串，searchString 是要搜索的字符串，length 是可选的参数，表示从 str 的哪个位置结束匹配。

下面是一个示例代码：

const str = 'hello world';
const isEndsWith = str.endsWith('world');

console.log(isEndsWith); // true

使用示例

下面是一些更具体的使用示例。

检查文件名

假设我们需要检查某个文件是否是一张 PNG 图片。我们可以使用 endsWith() 方法来判断这个文件名是否以 .png 结尾：

const fileName = 'image.png';
if (fileName.endsWith('.png')) {
  console.log('This is a PNG image');
}

检查输入

假如我们的表单中有一个输入框，并且要求输入的字符串以 http:// 或 https:// 开头，否则不允许提交：

const inputText = 'http://www.example.com';
if (!inputText.startsWith('http://') && !inputText.startsWith('https://')) {
  console.log('Please input a valid URL');
} else {
  // 提交表单逻辑
}

兼容性

String.startsWith() 和 String.endsWith() 方法虽然是 ES12 引入的新功能，但是这两个方法已经得到了大部分现代浏览器的支持。如果需要兼容旧浏览器，我们可以使用 polyfill 实现兼容性。

总结

String.startsWith() 和 String.endsWith() 是非常实用和方便的字符串操作方法。我们可以使用它们来检查是否具有特定前缀或后缀。在实际开发中，我们经常需要进行字符串的比较和处理，这两个方法可以帮助我们更快速地完成这些操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489af9e48841e98947efe97