intl.datetimeformat 和 intl.numberformat 需配合原始值管理、编辑态/展示态分离及 dom 精准更新，避免解析失败与光标丢失。
Intl.DateTimeFormat 在 HTML 输入框中实时格式化日期
直接用 Intl.DateTimeFormat 不能自动“接管”输入框的编辑行为，它只负责格式化输出，不处理用户输入。想在 HTML 编辑器（比如 contenteditable 区域或 input[type="text"]）里实现“输入即格式化”，必须手动监听输入、解析原始值、再用 Intl.DateTimeFormat 格式化显示——但要注意：用户删减中间字符时容易破坏格式，导致解析失败。
推荐做法是分离「编辑态」和「展示态」：
- 用一个隐藏的
<input type="date">或<input type="hidden">存原始 ISO 字符串（如"2024-06-15"） - 在可见区域（如
div[contenteditable]）仅作只读展示，用Intl.DateTimeFormat渲染，例如：new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' }).format(new Date('2024-06-15')) // → "2024年6月15日 土曜日" - 点击时聚焦到隐藏 input，由浏览器原生控件保障日期合法性，避免手输解析歧义
Intl.NumberFormat 处理货币时的 locale 与 currency 必须同时指定
只设 locale 不设 currency，或反过来，Intl.NumberFormat 会静默降级为普通数字格式（无货币符号、无千分位），不会报错，但结果不符合预期。
常见错误写法：
new Intl.NumberFormat('de-DE').format(1234.56) // → "1.234,56"（没单位）正确写法必须显式传 currency 和 style：new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.56) // → "1.234,56 €"
-
currency值必须是标准三字母代码（如"USD"、"JPY"），小写或混写会失败 -
currencyDisplay可选"symbol"（默认）、"code"（如"USD"）、"narrowSymbol"（部分 locale 支持更简符号） - 注意 JPY 等无小数位货币：设置
minimumFractionDigits: 0避免强制补 .00
contenteditable 区域内混合文本与格式化内容的更新陷阱
在 contenteditable 里直接 innerHTML 替换整个内容，会清空光标位置、丢失用户正在编辑的上下文。如果只是局部更新某段日期/金额，不能简单重 render 全文。
- 用
Range+Selection定位待替换节点，再用document.createTextNode()替换文本节点，保留 DOM 结构 - 避免对已格式化的文本再次调用
Intl格式化——比如用户刚输完"1234"，你把它转成"¥1,234"；若后续又输"5"，得先剥离符号和逗号，再拼接数字，否则解析出错 - 建议给每个可格式化字段加唯一
data-formatted-type="date"或data-currency="USD"属性，便于定位和隔离处理
服务端返回的原始数据类型必须明确，否则 Intl 构造失败
Intl.DateTimeFormat 只接受 Date 实例或时间戳数字，不接受字符串（除非是 ISO 格式且能被 Date.parse() 安全解析）。Intl.NumberFormat 同理，只接受 number，传入字符串会静默转成 NaN，最终格式化为 "NaN"。
- 后端返回日期字段，优先用 ISO 8601 字符串（
"2024-06-15T08:30:00Z"），前端 new Date() 构造；避免毫秒数以外的数字时间戳（如秒级） - 货币数值必须是 number 类型，不要传
"1234.56"字符串——JSON 解析后仍是字符串，需显式parseFloat()或Number() - 遇到
Invalid DateTimeFormat locale: zh-CN这类错误，大概率是 locale 字符串含非法字符（如空格、下划线误写成短横）、或浏览器根本不支持该 locale（如某些旧 Android WebView）
Intl API，而是把格式化结果嵌进用户可编辑流程里还不崩光标、不丢输入、不误解析——尤其当日期和货币混在同一段富文本中时，每个格式化节点都得独立维护原始值快照。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
