本文介绍一种动态生成字符串字符位置标尺的方法，支持自动适配任意长度字符串，精准显示个位（0–9循环）和十位数字，便于快速定位字符索引，显著提升前端调试效率。

在前端开发与调试过程中，常需快速确认字符串中某字符的实际索引位置（尤其是处理截取、替换或正则匹配时）。手动拼接固定长度的标尺不仅低效，还容易因字符串长度变化而错位。理想的解决方案是：根据字符串实际长度，自动生成两行对齐的数字标尺——上行为个位（0 2 4 6 8 0 2…），下行为十位（每10个字符显示一次，居中对齐于对应‘0’下方）。

以下是实现该功能的核心逻辑：

function getUnits(length) {
    let result = '';
    for (let i = 0; i <= length; i++) {
        result += (i % 2 === 0) ? (i % 10).toString() : ' ';
    }
    return result;
}

function getTens(length) {
    let result = '';
    for (let i = 0; i <= length; i++) {
        result += (i % 10 === 0) ? Math.floor(i / 10).toString() : ' ';
    }
    return result;
}

function getDebugString(str) {
    return `${str}\n${getUnits(str.length)}\n${getTens(str.length)}`;
}

• getUnits(length)：遍历索引 0 到 length（含末尾空格位），在偶数索引处输出个位数字（i % 10），奇数索引处填空格，形成 0 2 4 6 8 0 2... 节奏；
• getTens(length)：仅在 i % 10 === 0 的位置（即索引 0、10、20…）输出十位数字（Math.floor(i / 10)），其余为空格，确保十位数字垂直居中对齐其对应“0”；
• getDebugString(str)：组合原始字符串与两行标尺，用换行符分隔，可直接用于 console.log()。

✅ 使用示例：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

console.log(getDebugString("a string"));
// 输出：
// a string
// 0 2 4 6 8 0 2 
// 0         1 

console.log(getDebugString("a string with its characters' positions below it"));
// 自动扩展至完整长度，十位数字在 10、20、30、40 处准确对齐

⚠️ 注意事项：

• 标尺长度严格匹配 str.length + 1（因包含末尾空格位，便于对齐最后一个字符右侧）；
• 所有输出为纯文本，兼容 console.log、console.debug 及复制粘贴到编辑器中查看；
• 若需高亮原始字符串（如原问题中黄色背景），可在调用时结合 %c 样式：
  console.debug(%c${str}\n${getUnits(str.length)}\n${getTens(str.length)}, 'background: #ffeb3b; color: #000');

该方案轻量、无依赖、逻辑清晰，可直接集成至调试工具函数库，成为日常字符串索引分析的可靠助手。