ES8 中的 String.prototype.includes() 是一种在字符串中搜索指定文本的方法，它返回一个布尔值，表示是否找到了指定的文本。这个方法在现代浏览器中得到了广泛的支持，但在 IE11 中存在兼容性问题。本文将介绍如何解决这个问题，以及如何在实际的开发中应用这个方法。
解决兼容性问题
在 IE11 中，String.prototype.includes() 方法并不被支持。如果我们在 IE11 中使用这个方法，会导致代码执行错误或未定义的行为。为了解决这个问题，我们需要使用一个 polyfill，即向原生方法添加缺失的功能。
这里我们使用 es6-string-methods 这个 npm 包来提供 polyfill 功能。我们可以使用以下命令将其安装：
npm install es6-string-methods --save
然后在我们的代码中引用它：
require('es6-string-methods');或
import 'es6-string-methods';
这样，就可以在 IE11 中使用 String.prototype.includes() 方法了。
应用示例
下面是一个使用 String.prototype.includes() 方法的示例：
const str = 'Hello, world!';
const search = 'world';
if (str.includes(search)) {
console.log(`'${search}' was found in '${str}'`);
} else {
console.log(`'${search}' was not found in '${str}'`);
}运行这个示例会输出 'world' was found in 'Hello, world!'。
如果我们在 IE11 中使用这个示例代码，会发现控制台输出一个错误：
SCRIPT438: Object doesn't support property or method 'includes'
这是因为 IE11 不支持 String.prototype.includes() 方法。我们可以通过添加 polyfill 来解决这个问题。
现在我们已经知道了如何解决这个兼容性问题，让我们更进一步，看看如何将这个方法应用到实际的开发中。
实际应用
在实际的开发中，String.prototype.includes() 可以用作检查字符串中是否存在某些文本的工具。例如，我们可以使用它来检查用户是否输入了一个有效的电子邮件地址：
-- -------------------- ---- -------
----- ---------- - ---------------------------------
----------------------------------- ---------- -
----- ----- - ------------------------
-- ---------------------- -
------------- ----- - ----- ----- -----------
-------------------
-------
-
-- ----- -- ------ ------ --- ----
-- ---
---在这个示例中，我们在 blur 事件中检查用户输入的电子邮件是否包含 @，如果不包含，则显示一个警告消息，并将焦点设置回输入框中。如果用户输入的电子邮件是有效的，则可以将表单提交到服务器。
另一个实际应用的例子是在搜索框中搜索关键字：
-- -------------------- ---- -------
----- ----------- - ----------------------------------
----- ------------ - -----------------------------------------
----- ---------------- - -----------------------------------
-------------------------------------- ---------- -
----- ---------- - -------------------------
-------------------------- - ---
-- ------------ -
----- ------- - -----------------------------
-- ---------------- -
-------------------------------- -
----- -------- - ------------------------------
------------------ - -------------
---------------------------------------
---
- ---- -
----- ----------- - ------------------------------
--------------------- - --- ------- --------
------------------------------------------
-
-
---
-------- ---------------------------- -
-- ---- -- --- ------- -- --- ------ ------- ----- -- --- ------ ----
-- ---
------ -
- ------ ------- -- --
- ------ ------- -- -
--
-在这个示例中，当用户单击“搜索”按钮时，我们使用 String.prototype.includes() 方法来查找与输入的搜索文本匹配的结果。我们将结果显示在一个 div 容器中，如果没有找到匹配结果，则显示一个“没有结果”的提示。
结论
在本文中，我们讨论了在 IE11 中使用 ES8 的 String.prototype.includes() 方法的兼容性问题，并介绍了如何使用 polyfill 解决这个问题。我们还提供了一些 String.prototype.includes() 方法的应用示例，包括在表单中验证电子邮件地址和搜索框中搜索关键词。希望本文能够帮助读者更好地理解 String.prototype.includes() 方法，以及如何在实际的开发中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67514b888bd460d3ad882631