JavaScript如何判断数字对应Unicode字符是否可正常渲染

• 网页里显示的空心缺字方框（俗称“豆腐块”）、空白占位不是字符本身的实际值，是操作系统/浏览器渲染层的兜底效果：当你传入的Unicode码点属于未定义保留位、控制字符，或者当前网页、系统安装的字体没有该码点对应的字形资源时，渲染引擎不会修改内存中存储的原始字符，只会在视觉绘制阶段输出一个占位方框或者空白，因此你用代码判断字符是否等于方框字符、空字符串时，永远会得到false——内存里存的始终是你原始传入的那个无法正常渲染的码点，和渲染出来的视觉符号没有关系。
• 直接用String.fromCharCode(数位对应的十进制数值)生成数位字符的方案本身就有缺陷：Unicode码段中混有大量不可打印内容：0-31、127-159是控制字符，渲染后为空白；数千个码点是未分配的保留位，没有对应标准字形；如果数位值超过65535，fromCharCode还会因为UTF-16编码规则生成无效代理对，输出乱码。

不要靠判断渲染结果过滤无效字符，这类判断不仅兼容性差，也无法覆盖字体缺失导致的缺字问题。最稳妥的方案是主动维护确定可显示、无歧义的单字符白名单做映射，从根源上避免生成不可显示字符。

推荐映射规则 #

按照用户认知成本从低到高选连续可打印字符即可，覆盖绝大多数使用场景：

• 数值0-9：直接映射0-9数字字符，符合通用数字认知
• 数值10-35：映射大写英文字母A-Z，和常规36进制的标准实现一致
• 数值36-61：映射小写英文字母a-z，可支持最高62位进制转换
• 需要支持更大基数时，可继续追加无歧义的ASCII可打印符号（注意避开空格、引号、尖括号这类HTML特殊字符），比如!#$%&()*+,-./:;<=>?@[]^_{|}~，追加后可支持最高90+位的进制转换。

对应的映射实现参考：

// 按顺序排列的数位字符表，下标对应数位的十进制值
const DIGIT_POOL = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!#$%&()*+,-./:;<=>?@[]^_{|}~';

// 数值转数位字符
function numToDigit(num) {
  if (num < 0 || num >= DIGIT_POOL.length) throw new Error('进制基数超出当前字符池支持范围');
  return DIGIT_POOL[num];
}

// 数位字符转数值
function digitToNum(char) {
  const res = DIGIT_POOL.indexOf(char);
  if (res === -1) throw new Error('非法数位字符');
  return res;
}

（不推荐）动态生成字符时的过滤逻辑 #

如果你确实需要动态映射Unicode字符而不是用固定字符池，可以通过Unicode类别排除不可打印字符，注意这个方案无法解决用户端字体缺失导致的缺字问题：

function isPrintable(char) {
  const code = char.codePointAt(0);
  // 排除ASCII与Latin-1控制字符段
  if ((code >= 0x0000 && code <= 0x001F) || (code >= 0x007F && code <= 0x009F)) return false;
  // 正则\p{C}匹配所有Unicode不可打印类别：控制符、格式符、代理项、私用区、未分配码位
  return !/\p{C}/u.test(char);
}

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