介绍
wildcard-utils 是一个用于路径通配符匹配的 npm 包，它可以方便地进行路径的匹配和筛选。它可以与 Node.js、TypeScript 和浏览器一起使用，非常适用于处理文件路径和代码中的 url。
在前端开发过程中，有时会遇到需要匹配一组路径的场景，这时可以使用 wildcard-utils 包来进行匹配。
安装
使用 npm 安装：
--- ------- --------------
使用教程
wildcard-utils 包提供了多种通配符匹配功能，以下是常用的 4 种：
*匹配任意字符**匹配任意层级的路径?匹配一个字符{}匹配多个选项中的任意一个
匹配单层路径
------ - ----- - ---- ----------------- ----------------------------- --------------- -- ---- ----------------------------- ------------------- -- -----
上面的代码示例中，我们使用了 match(pattern: string, string: string): boolean 方法，对两个路径进行匹配操作。其中，pattern 参数为要匹配的路径通配符，string 参数为要匹配的实际路径。
在第一次匹配中，我们使用 * 通配符来匹配了在 src 目录下任意的 js 文件，对应的实际路径是 src/app.js，所以匹配结果为 true。
在第二次匹配中，我们使用了 * 通配符来匹配 src 目录下的所有 js 文件，但是实际路径是 dist/bundle.js，所以匹配结果为 false。
匹配多层路径
------ - ----- - ---- ----------------- -------------------------------- --------------- -- ---- -------------------------------- -------------------------- -- ---- -------------------------------- ------------------- -- -----
上面的代码示例中，我们使用 ** 通配符表示可以匹配任意深度的路径层级，可以用来匹配类似 /src/utils/math/add.js 这样的文件路径。
在第一次匹配中，我们使用 src/**/*.js 来匹配 /src 目录下任意深度、任意 js 文件，对应的实际路径为 src/app.js，所以匹配结果为 true。
在第二次匹配中，我们使用 src/**/*.js 来匹配 /src 目录下任意深度、任意 js 文件，对应的实际路径为 /src/utils/math/add.js，所以匹配结果为 true。
在第三次匹配中，我们使用 src/**/*.js 来匹配 /src 目录下任意深度、任意 js 文件，但实际路径为 /dist/bundle.js，所以匹配结果为 false。
匹配单个字符
------ - ----- - ---- ----------------- ------------------------------- --------------- -- ---- -------------------------------------- ---------------------- -- ---- ------------------------------------ ------------------- -- -----
上面的代码示例中，我们使用了 ? 通配符来匹配单个字符。
在第一次匹配中，我们使用 src/?pp.js 来匹配 src 目录下，文件名为 3 个字符（首位是任意字符，第二个字符必须是 p，最后一个字符必须是 p），所以实际匹配结果为 src/app.js，匹配结果为 true。
在第二次匹配中，我们使用了 test/?/?/note?.js 来匹配 test 目录下，三级路径（前两级任意一个字符，第三级必须是 note，最后一个字符必须是任意字符），所以实际匹配结果为 test/a/b/note1.js，匹配结果为 true。
在第三次匹配中，我们使用了 test/?/note*.js 来匹配 test 目录下，二级路径（第一级必须是 test，第二级任意一个字符，最后一个字符必须是 note 后面跟任意个字符），所以实际匹配结果为 test/a/b/note1.js，但不匹配 test/a/note.js，所以匹配结果为 false。
匹配多选项中的任意一个
------ - ----- - ---- ----------------- ---------------------------------- -------------- -- ---- ---------------------------------- -------------- -- ---- ---------------------------------- -------------- -- -----
上面的代码示例中，我们使用了 {} 通配符来匹配多个选项中的任意一个，选项之间用 , 分隔。
在第一次匹配中，我们使用了 test/{a,b}.js 来匹配 test 目录下，文件名必须是 a.js 或者 b.js，所以实际匹配结果为 test/a.js，匹配结果为 true。
在第二次匹配中，我们使用了 test/{a,b}.js 来匹配 test 目录下，文件名必须是 a.js 或者 b.js，所以实际匹配结果为 test/b.js，匹配结果为 true。
在第三次匹配中，我们使用了 test/{a,b}.js 来匹配 test 目录下，文件名必须是 a.js 或者 b.js，但是实际文件名是 c.js，所以匹配结果为 false。
总结
通配符匹配在前端开发中是经常用到的功能，wildcard-utils 包提供了许多有用的方法来实现通配符匹配。在本文中，我们介绍了常用的 4 种通配符匹配功能，希望可以帮助大家更好地理解和使用 wildcard-utils 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567b781e8991b448e3fdf