正则表达式作为前端开发中不可或缺的工具，是处理字符串的有力武器。在最新版本的 ECMAScript（即 ES11）中，RegExp 带来一项新功能——结尾锚。本文将详细介绍这一功能的具体用法和优点，并提供一些示例代码供读者参考。
什么是结尾锚？
在正则表达式中，锚定符 " ^ " 和 " $ " 分别用于匹配文本的开头和结尾。在 ES11 中，新加入了结尾锚，用 "$" 符号表示。与 " ^ " 相反，结尾锚用于匹配字符串的结尾。
下面是一个简单的结尾锚示例：
----- ------- - -------- ------------------------------ -- - -------- -- ---- ------------------------------ -- - ---- ----------- -- -----
在这个例子中，我们使用结尾锚 "$" 定义了一个正则表达式模式，表示需要匹配以 "test" 结尾的字符串。通过调用 pattern.test() 方法，我们可以检查给定字符串是否符合这个模式。在第一个 console.log 中，我们的匹配结果为 true，因为 "This is a test" 的结尾是 "test"。而第二个 console.log 中则返回 false，因为 "This is a test string." 不以 "test" 结尾。
为什么使用结尾锚？
结尾锚的重要性在于它可以避免一些常见问题，尤其是在处理格式化字符串时。因为结尾锚可以确保我们的正则表达式只匹配字符串的结尾，而不是中间部分。下面是一个例子：
----- ------- - ------------- --------------------------------- -- ------- --------------------------------- -- -------
在这个例子中，我们定义了一个正则表达式模式，用于查找以百分号结尾的数字。注意，在 " \d+ " 后面，我们加入了一个逻辑分组 "(?=%|$)"，其中 " % " 表示百分号，" \d+ " 表示数字，而 "(?=%|$)" 则表示对于每个匹配，必须在其结尾处要么跟随一个百分号，要么到达字符串的结尾。
通过使用结尾锚 "$"，我们可以使正则表达式更加简洁明了。下面展示了如何使用结尾锚来实现相同的功能：
----- ------- - -------- --------------------------------- -- ------- --------------------------------- -- ----
我们重新定义了模式为 /\d+%$/，这个模式直接将结尾锚包含在内。可以发现，第一个 console.log 仍然返回 ["95%"]，而第二个 console.log 却返回 null，因为 "200" 不以百分号结尾，符合我们的匹配条件。
总结
结尾锚是 ES11 中一项有用的正则表达式新功能，它可以使正则表达式更加简洁明了，同时避免一些常见问题。通过结尾锚，我们可以确保正则表达式只匹配字符串的结尾，而不是中间部分。在处理格式化字符串等场合尤其实用。希望这篇文章能够帮助读者更好地理解和使用结尾锚的技巧。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646eca82968c7c53b0d1ca59