法语价格格式化技巧与实现方法

本文深入剖析了法语价格格式化中一个隐蔽却高频的坑：`toLocaleString('fr-FR')` 生成的窄不换行空格（U+202F）会导致 `parseInt()` 解析中断，引发输入被意外截断、光标错乱等糟糕体验；文章不仅一针见血指出问题根源，更提供简洁可靠的 `blur` + `replaceAll(/\D/g, '')` 方案，并强调避免在 `keyup/input` 中修改值、显式指定进制、空值防护等关键实践，兼顾健壮性与用户体验——让你的法语价格输入既符合本地规范，又真正“听话好用”。

本文详解在文本输入框中实时格式化数字为本地化价格（如法语 `1 234`）时常见的光标错乱与解析失效问题，指出 `toLocaleString('fr-FR')` 插入的窄不换行空格（U+202F）导致 `parseInt()` 截断，并提供健壮、用户体验友好的解决方案。

你遇到的“输入到第4位后回退成单数字”现象，根本原因在于：Number.prototype.toLocaleString('fr-FR') 生成的千位分隔符不是普通空格（U+0020），而是 Unicode 窄不换行空格（U+202F）——一种不可见、不可删除、且 parseInt() 无法跳过的非数字字符。

当用户输入 2222，代码执行：

"2222".toLocaleString('fr-FR') // → "2 222"（注意中间是 U+202F，非空格！）
parseInt("2 222")              // → 2（parseInt 遇到首个非数字字符即停止解析）

后续赋值 minPrice.value = "2"，直接覆盖全部输入，造成“吃掉”输入的诡异行为。

✅ 正确做法：用正则清除所有非数字字符

const minPrice = document.getElementById('minPrice');

// 使用 blur 事件替代 keyup，避免光标干扰
minPrice.addEventListener('blur', function () {
  const raw = this.value;
  // 一步清除所有非数字字符（包括 U+202F、逗号、点、字母等）
  const digitsOnly = raw.replaceAll(/\D/g, '');

  if (digitsOnly === '') {
    this.value = '';
    return;
  }

  const num = parseInt(digitsOnly, 10);
  // 使用 toLocaleString 并确保解析安全
  this.value = num.toLocaleString('fr-FR');
});

⚠️ 关键注意事项

• 永远避免在 keyup/input 中修改 value：会导致光标跳至末尾，破坏用户在中间编辑（如修改 1 234 中的 3）的体验；
• blur 是更安全的时机：用户完成输入并移开焦点时格式化，符合直觉；
• /\D/g 比 ' ' 更可靠：\D 匹配任意非数字字符（含 Unicode 分隔符、符号、空格），彻底规避解析陷阱；
• 显式指定进制：parseInt(digitsOnly, 10) 防止八进制误解析（如 "08" 被转为 0）；
• 空值防护：digitsOnly === '' 时清空输入框，避免残留格式字符。

✅ 进阶建议（可选）

若需实时反馈（如边输边格式化），应使用 input 事件 + 光标位置保存/恢复技术（较复杂），或改用成熟的库如 cleave.js 或原生 <input type="number"> + CSS 样式辅助。但对价格范围筛选场景，blur 触发的清晰、无副作用格式化，通常是最佳平衡点。

记住：格式化是展示层职责，不应侵入用户输入流。保持输入框“原生感”，才是专业表单体验的基石。

今天关于《法语价格格式化技巧与实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！