在前端开发中，经常会遇到需要对字符串进行转义的情况。而对于 CSS 中的选择器而言，我们需要将其进行转义后才能正确地使用。在这种情况下，css.escape 这个 npm 包就能为我们带来很大的便利。
什么是 css.escape
css.escape 是一个 JavaScript 函数，用来将字符串中的特殊字符进行转义，以便在 CSS 选择器中使用。此包支持将 CSS.escape 的功能在不支持该方法的浏览器中进行 Polyfill。
如何安装 css.escape
通过 npm 安装：
npm install css.escape
或者通过 yarn 安装：
yarn add css.escape
怎样使用 css.escape
基本用法
当你需要在样式表中使用字符串和需要保证其能被解析为有效的 CSS 选择器时，你可以使用 css.escape 函数将特殊字符进行转义。以下是基本用法：
const cssEscape = require('css.escape');
const mySelector = '.my-class';
const myEscapedSelector = cssEscape(mySelector);
console.log(myEscapedSelector);
// Output: "\.my-class"使用 es module
import cssEscape from 'css.escape'; const mySelector = '.my-class'; const myEscapedSelector = cssEscape(mySelector); console.log(myEscapedSelector); // Output: "\.my-class"
如何 Polyfill
在一些浏览器中，polyfill 机制需要借助第三方工具来实现。可以使用 core-js 或类似的工具。以下是示例代码：
import 'core-js/es/string/escape-css'; const mySelector = '.my-class'; const myEscapedSelector = mySelector.escapeCSS(); console.log(myEscapedSelector); // Output: "\.my-class"
案例
通过较为实际的案例，来演示 css.escape 函数的使用。
情景
假设你需要在页面中给一些特定的图片添加样式，而这些图片的样式是通过 CSS 类选择器来实现的。但是，这些图片的文件名中包含一些特殊字符（例如 + 和 &），这些特殊字符需要在样式中进行转义，才能正确地显示图片。
解决方案
使用 css.escape 函数将文件名进行转义。以下是示例代码：
HTML 代码：
<img class="special-img" src="images/spotty+face&amazing.jpg" alt="Special Image">
CSS 代码：
.特殊-img[src='images/spotty+face&amazing.jpg'] {
border: 10px solid red;
}JavaScript 代码：
-- -------------------- ---- ------- ------ --------- ---- ------------- ----- ----------------- - --------------- ----- --------------- - --------------------------------- ----- -------- ------------------------------------------------------------------------ ----- ------------ - --------------------------------- -------------------------------------
转换后的 CSS 选择器：
.\u7279\u6B8A-img[src='images\/spotty\+face\&amazing.jpg'] {
border: 10px solid red;
}最终的结果：
<img class="special-img 特殊-img" src="images/spotty+face&amazing.jpg" alt="Special Image">
结论
CSS 中包含的特殊字符对于 JavaScript 和 HTML 来说都是非法字符，而 css.escape 包能够帮助你快速地解决这个问题。这个包将帮助你避免在编写 CSS 选择器时遇到特殊字符时产生的麻烦，让你可以更加专注于编写代码的功能实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73452