资讯动态

30 seconds of code:JavaScript 字符串去重音(remove-accents)实现与 Unicode 规范化原理

发布时间:2026/10/5 2:02:05 来源:尧图企业网站定制
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文基于 30-seconds-of-code 仓库中的 remove-accents.md 文档系统讲解如何在 JavaScript 中快速去除字符串的重音符号accent/diacritical mark。你将掌握String.prototype.normalize(NFD)与正则表达式的组合用法并理解其背后的 Unicode 规范化原理从而在字符串比较、搜索、存储与 slug 生成等场景中直接落地应用。为什么需要去除重音符号在 JavaScript 开发中处理非英文字符串时常常会遇到带重音符号的文本例如法语中的é、è、ê德语中的ä、ö、ü以及西班牙语中的ñ等。这些字符在视觉上直观易懂但在程序处理中却可能带来一系列麻烦字符串比较失真café cafe的结果为false即使语义上用户可能认为它们相同。去除重音后即可让这类比较宽容地通过搜索与索引不便用户输入cafe却搜不到数据库里的café去重音可以让搜索关键字与存储内容对齐存储与展示规范化部分系统、旧数据库或外部接口对非 ASCII 字符支持不佳将字符串归一化为纯 ASCII 形式更利于存储、传输和跨系统兼容。正如原文档所述去除重音的核心诉求就是在比较字符串时不考虑重音以及在存储或展示前将字符串规范化。核心方案normalize(NFD) 正则替换表面上看这是一件困难的事但实际上 JavaScript 内置的String.prototype.normalize()方法让它可以一行搞定。原文档给出的实现如下const removeAccents str str.normalize(NFD).replace(/[\u0300-\u036f]/g, ); removeAccents(Antoine de Saint-Exupéry); // Antoine de Saint-Exupery整个方案只分两步使用normalize(NFD)将字符串转换为NFDNormalization Form Canonical Decomposition规范化形式把组合字符拆分为基础字符 变音标记两部分使用replace()配合正则/[\u0300-\u036f]/g匹配 Unicode 中的组合变音标记Combining Diacritical Marks区间并将其替换为空字符串从而把变音标记从字符串中彻底移除。NFD 规范化做了什么Unicode 中存在两种字符表示方式预组合字符precomposed与组合序列decomposed。例如éU00E9是预组合字符直接用一个码点表示e◌́U0065 U0301是组合序列用基础字母 组合重音符两个码点表示。normalize(NFD)的作用就是把预组合字符拆解成等价的组合序列。以é为例NFD 之后它变成e加上一个组合音调符号。这样一来基础字符字母与变音标记就被分离到了不同的码点上后续用正则按码点区间匹配变音标记并删除就变得非常简单。需要注意的是String.prototype.normalize()支持四种规范化形式NFC、NFD、NFKC、NFKD其中NFD和NFKD是分解形式decompositionNFC与NFKC是组合形式composition。去重音必须使用分解形式NFD因为只有分解才能把变音标记拆出来供正则删除。该方法的详细行为可以参考仓库 content/languages/javascript.yaml 中收录的String.prototype.normalize()文档链接。理解 \u0300-\u036f 区间正则中的[\u0300-\u036f]对应 Unicode 的Combining Diacritical Marks块U0300 至 U036F该区间包含组合重音符combining acute accent、组合抑音符combining grave accent、组合扬抑符、组合分音符等绝大多数拉丁字母系统常用的变音标记码点。加上g标志global后replace()会扫描整个字符串删除所有命中的变音标记。上面的示例中Antoine de Saint-Exupéry经过normalize(NFD)后é被拆解为e 组合重音符随后组合重音符被正则匹配并删除最终得到纯 ASCII 形式的Antoine de Saint-Exupery。进阶组合去重音 转小写 生成 slug去除重音很少单独使用通常它会与字符串的小写化、修剪、特殊字符清理等操作组合构成一个完整的规范化流水线。例如在仓库的 string-to-slug.md 中把字符串转换为 SEO 友好的 slug 时常规流程是转小写 → 去除特殊字符 → 将空白与分隔符替换为连字符。若在转小写之前先执行removeAccents就能让Café Décor这类带重音文本顺利产出cafe-decor形式的干净 slugconst removeAccents str str.normalize(NFD).replace(/[\u0300-\u036f]/g, ); const slugify str removeAccents(str) .toLowerCase() .trim() .replace(/[^\w\s-]/g, ) .replace(/[\s_-]/g, -) .replace(/^-|-$/g, ); slugify(Café Décor!); // cafe-decor同理仓库中的 is-anagram.md 展示了另一种规范化思路通过toLowerCase()与replace()正则去除非必要字符后再排序比较。去重音逻辑完全可以作为这类比较场景的前置步骤保证Aé与ae这类输入在比较时被视为等价。结合场景一大小写与重音不敏感的字符串比较去除重音只是字符串规范化的一种手段。如果目标只是比较字符串时忽略大小写和重音而不想物理上修改原字符串仓库中的 compare-string-case-accent-insensitive.md 提供了另一种更贴近语言环境的选择——Intl.Collatorconst arr [ä, a, b, A, B, Å]; const collator new Intl.Collator(); const deCollator new Intl.Collator(de); const svCollator new Intl.Collator(sv); arr.sort(collator.compare); // [a, A, Å, ä, b, B] arr.sort(deCollator.compare); // [a, A, Å, ä, b, B] arr.sort(svCollator.compare); // [a, A, b, B, Å, ä]两者的定位不同Intl.Collator适合需要遵守特定语言排序规则例如瑞典语中Å应排在字母表末尾的场景而removeAccents适合需要把字符串本身归一化为纯 ASCII的场景例如生成 URL、做不区分重音的搜索键。实际选型时应按需求二选一或组合使用去重音得到规范化副本用于存储与匹配Intl.Collator用于保持语言敏感的输出排序。注意事项与边界情况尽管normalize(NFD) replace是最简洁高效的通用方案使用时仍需留意以下几点并非所有字符都会被 NFD 分解部分字符如丹麦语/挪威语的ø、德语的ß、带斜线的ł等在 NFD 下不会拆出可被\u0300-\u036f匹配的组合标记因此去重音对它们不生效。这类字符需要另行映射处理组合标记区间之外\u0300-\u036f只覆盖 Combining Diacritical Marks 块个别扩展变音标记位于其他 Unicode 块如 U1AB0 起的扩展块如遇极特殊文本可考虑扩展区间只去变音、不动字母该方案只删除变音标记基础字母本身包括非 ASCII 字母会被保留这正是去除重音而非全部转 ASCII的语义所在适用于拉丁语系文本对阿拉伯文、希伯来文、梵文等其它文字系统本方案无法起到类似作用。总结30-seconds-of-code 仓库的 remove-accents.md 用两行代码就解决了 JavaScript 字符串去重音的经典问题其技术内核是Unicode NFD 规范化 组合变音标记区间的正则替换。在实际项目中把它与转小写、slug 化、Intl.Collator比较等手段灵活组合即可构建出可靠的字符串规范化体系覆盖比较、搜索、存储与 URL 生成等常见业务诉求。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of CodeJavaScript 百分位计算percentile实现与原理详解30 Seconds of CodeJavaScript 百分位计算percentile实现与原理详解 导读 在 30 Seconds of Code 项教程文档30 seconds of codePython 字符串去除空白字符完全指南strip / lstrip / rstrip30 seconds of codePython 字符串去除空白字符完全指南strip / lstrip / rstrip 在 Python 日常开发中教程文档30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings 导读 在跨平台开发的日常中文本文件教程文档创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑