本文介绍在日期格式化等场景中，如何通过正则边界匹配和替换顺序优化，避免因短占位符被长占位符子串误替换而导致的字符串替换冲突问题。
本文介绍在日期格式化等场景中，如何通过正则边界匹配和替换顺序优化，避免因短占位符被长占位符子串误替换而导致的字符串替换冲突问题。
在实现类似 PHP date() 风格的 JavaScript 日期格式化方法时，一个常见陷阱是占位符之间的子串覆盖冲突：例如 'ddd'（如 "Sun"）会被 'dd'（如 "05"）的替换逻辑意外干扰——当先执行 template.replace('dd', '05') 后，原字符串中的 'ddd' 变成 '05d'，导致后续 'ddd' 无法再被正确匹配。
根本原因在于：逐次调用 .replace() 是顺序且非原子的，且默认字符串匹配不区分词边界。因此，解决方案需同时满足两个关键原则：
- 按长度降序替换：优先处理更长的占位符（如 'dddd' → 'dddd'），避免其子串（如 'ddd'、'dd'）在后续步骤中被错误覆盖；
- 使用单词边界 正则确保精确匹配：/dd/g 只匹配独立的 'dd'，而不会命中 'ddd' 或 'dd-' 中的子串。
以下是优化后的专业实现：
Date.prototype.format = function (template) {
const replacements = {
'yyyy': this.getFullYear(),
'mm': String(this.getMonth() + 1).padStart(2, '0'),
'dd': String(this.getDate()).padStart(2, '0'),
'HH': String(this.getHours()).padStart(2, '0'),
'ii': String(this.getMinutes()).padStart(2, '0'),
'ss': String(this.getSeconds()).padStart(2, '0'),
'dddd': this.toLocaleString(window.navigator.language, { weekday: 'long' }),
'ddd': this.toLocaleString(window.navigator.language, { weekday: 'short' }),
};
// 按键长度降序排序，确保 'dddd' 在 'ddd' 和 'dd' 之前处理
const sortedKeys = Object.keys(replacements).sort((a, b) => b.length - a.length);
return sortedKeys.reduce((str, key) => {
// 使用 确保只匹配完整、独立的占位符
const regex = new RegExp(`\b${key}\b`, 'g');
return str.replace(regex, replacements[key]);
}, template);
};
✅ 使用示例：
const d = new Date(2023, 10, 5); // 2023-11-05
console.log(d.format('ddd dd-mm-yyyy')); // → "Sun 05-11-2023"
console.log(d.format('dddd, dd MMM yyyy')); // → "Sunday, 05 Nov 2023"（若扩展支持 MMM）
⚠️ 注意事项：
- 要求占位符前后为单词边界（即字母/数字/下划线以外的字符，或字符串首尾），因此模板中占位符建议用非字母数字分隔（如 'dd-mm-yyyy' 安全，而 'addb' 中的 'dd' 不会误匹配）；
- 若需支持更复杂分隔符（如连字符内嵌），可改用负向断言：/(?
- 扩展性提示：将 replacements 提取为配置对象，便于国际化或自定义格式器复用；
- 生产环境推荐使用成熟库（如 dayjs 或 Intl.DateTimeFormat），本方案适用于轻量定制或教学理解底层原理。
该方法不仅适用于日期格式化，也普适于任何基于命名占位符的模板渲染系统，是解决多阶段字符串替换冲突的经典范式。
