如何检查一个字符串是否以另一个字符串开头？

技术背景

在 JavaScript 开发中，经常会遇到需要判断一个字符串是否以另一个字符串开头的场景，比如在搜索、过滤、验证等功能中。不同版本的 JavaScript 提供了多种方法来实现这一需求。

实现步骤

1. 使用 ECMAScript 6 的 `String.prototype.startsWith()` 方法

这是最直接的方法，它在所有主流浏览器中都得到了支持。如果要在不支持的浏览器中使用，需要使用垫片（shim）或填充（polyfill）。

console.log("Hello World!".startsWith("He")); // true

var haystack = "Hello world";
var prefix = 'orl';
console.log(haystack.startsWith(prefix)); // false

2. 使用 `lastIndexOf()` 方法

lastIndexOf() 方法可以从指定位置开始反向搜索字符串。当第二个参数为 0 时，它可以用来判断字符串是否以指定子字符串开头。

function startsWith(str, word) {
    return str.lastIndexOf(word, 0) === 0;
}

console.log(startsWith("Hello", "He")); // true

3. 使用正则表达式

使用正则表达式的 test() 方法可以动态检查字符串是否以指定子字符串开头。

var haystack = 'Hello world';
var needle = 'He';
var regex = new RegExp('^' + needle);
console.log(regex.test(haystack)); // true

4. 使用 `substring()` 方法

通过比较字符串的前几个字符是否与指定子字符串相同来判断。

1
2
3

var data = "Hello world";
var input = 'He';
console.log(data.substring(0, input.length) === input); // true

核心代码

自定义 `startsWith` 函数

if (typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function (str) {
        if (str == null) return false;
        var i = str.length;
        if (this.length < i) return false;
        for (--i; (i >= 0) && (this[i] === str[i]); --i) continue;
        return i < 0;
    }
}

console.log("Hello".startsWith("He")); // true

数组过滤以指定字符串开头的元素

Array.prototype.mySearch = function (target) {
    if (typeof String.prototype.startsWith != 'function') {
        String.prototype.startsWith = function (str) {
            return this.slice(0, str.length) == str;
        };
    }
    var retValues = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i].startsWith(target)) { retValues.push(this[i]); }
    }
    return retValues;
};

var myArray = ['Hello', 'Helium', 'Hideout', 'Hamster'];
var myResult = myArray.mySearch('Hel');
console.log(myResult); // ['Hello', 'Helium']

最佳实践

兼容性考虑：如果需要支持旧版本浏览器，使用垫片或填充 String.prototype.startsWith() 方法，或者使用 lastIndexOf() 等兼容性更好的方法。
性能优化：对于长字符串，手动实现循环比较的方法可能性能更好，因为它不需要创建临时字符串或进行复杂的搜索。
代码可读性：使用 String.prototype.startsWith() 方法可以使代码更简洁易读，优先考虑使用该方法。

常见问题

1. 浏览器兼容性问题

如果在不支持 String.prototype.startsWith() 的浏览器中使用该方法，会导致错误。可以使用垫片或填充来解决这个问题。

2. 正则表达式特殊字符问题

如果使用正则表达式来检查字符串开头，需要注意字符串中可能包含的正则表达式控制字符，需要进行转义处理。

3. 空格问题