如何打印字符串并生成匹配其长度的字符位置标尺？

云上老周

2026-7-16

动态生成匹配字符串长度的字符位置标尺用于调试

为了加快调试效率，需要在打印字符串时，在其下方显示对应的字符位置标尺，效果示例如下：

a string with its characters' positions below it
0  2  4  6  8  0  2  4  6  8  0  2  4  6  8  0  2  4  6  8  0  2  4  6  8
          1         2         3         4

固定长度的标尺无法适配不同长度的字符串，这里提供一个动态生成适配长度标尺的JavaScript实现：

function logWithPositionRuler(str) {
  // 高亮打印原字符串，便于对齐查看
  console.debug(`%c${str}`, 'background-color: yellow');

  // 生成第一行标尺：偶数索引显示个位数字，奇数索引显示空格
  const firstLine = Array.from(str).map((_, idx) => {
    const digit = idx % 10;
    return digit % 2 === 0 ? digit : ' ';
  }).join(' ');

  // 生成第二行标尺：每10个字符显示对应十位数字，其余位置为空格
  const secondLine = Array.from(str).map((_, idx) => {
    if ((idx + 1) % 10 === 0) {
      return Math.floor((idx + 1) / 10);
    }
    return ' ';
  }).join(' ');

  console.debug(firstLine);
  console.debug(secondLine);
}

// 使用示例
const testString = "a string with its characters' positions below it";
logWithPositionRuler(testString);