字符串长度相同但对齐表现不同的JavaScript技术问题咨询

这种情况我之前排查过好多次，大概率是Word里的隐藏特殊字符或者渲染环境的字体差异在搞鬼，咱们一步步来解决：

1. 先揪出字符串里的"隐形捣蛋鬼" #

Word为了实现精准的两端对齐，经常会偷偷插入不间断空格（ASCII 160，对应 ）或者全角空格，而不是咱们常用的半角空格（ASCII 32）。这些特殊空格在浏览器里的渲染宽度和普通空格完全不一样，哪怕你看着字符数都是72，视觉上也会错位。

你可以先打印每个字符的编码，看看是不是有这类特殊字符：

// 遍历字符串，打印每个字符的ASCII码
[...stringa1].forEach((char, idx) => console.log(`stringa1第${idx}位: ${char.charCodeAt(0)}`));
[...stringa2].forEach((char, idx) => console.log(`stringa2第${idx}位: ${char.charCodeAt(0)}`));

如果看到输出里有160或者12288（全角空格的编码），那就是问题所在了。

2. 统一替换特殊空格为普通空格 #

把所有非标准空格换成普通半角空格，就能让两个字符串的空格类型统一：

// 替换不间断空格、全角空格为普通空格
const cleanStr1 = stringa1.replace(/[\u00A0\u3000]/g, ' ');
const cleanStr2 = stringa2.replace(/[\u00A0\u3000]/g, ' ');

3. 用等宽字体实现严格对齐 #

Word的默认字体（比如Calibri、宋体）是比例字体，不同字符宽度不一样（比如i和w的宽度差很多）。如果要实现和Word里一样的严格两端对齐，建议给渲染文本的元素用等宽字体：

.text-display {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  text-align: justify;
}

等宽字体的每个字符宽度完全一致，只要字符数相同，视觉上就能完美对齐。

4. 过滤隐藏的控制字符 #

有时候复制的文本里还会带有隐藏的换行符（\r\n）或者其他控制字符，这些字符会占用长度但不显示，导致你以为长度是72，实际渲染时却出问题。可以用下面的代码过滤掉：

// 只保留可打印字符（除了空格）
const filteredStr1 = stringa1.replace(/[^\x20-\x7E]/g, '');
const filteredStr2 = stringa2.replace(/[^\x20-\x7E]/g, '');
// 再确认处理后的长度是否真的是72
console.log(filteredStr1.length);

按照上面的步骤排查，应该就能解决你的对齐问题了。

内容的提问来源于stack exchange，提问作者Rinaldo Rasa