本文介绍一种动态生成字符位置标尺的方法，通过计算字符串长度自动生成个位数（0–9循环）和十位数（每10个字符标注一次）的对齐标尺，精准匹配任意长度字符串，大幅提升调试效率。
在前端开发与调试过程中，快速定位字符串中特定字符的索引位置至关重要。手动拼接标尺不仅低效，还极易因长度变化导致错位。理想的解决方案是：根据输入字符串长度，自动构建两行对齐标尺——上行为个位循环（0 2 4 6 8 0 2…），下行为十位标记（空格占位，仅在索引 0、10、20… 处显示数字）。
以下是实现该功能的核心函数：
function getUnits(length) {
let str = '';
for (let i = 0; i <= length; i++) {
str += i % 2 === 0 ? (i % 10).toString() : ' ';
}
return str;
}
function getTens(length) {
let str = '';
for (let i = 0; i <= length; i++) {
str += i % 10 === 0 ? Math.floor(i / 10) : ' ';
}
return str;
}
function getDebugString(str) {
return `${str}\n${getUnits(str.length)}\n${getTens(str.length)}`;
}✅ 使用示例：
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"));
// 自动适配超长字符串，个位与十位严格按索引对齐? 关键设计说明：
- getUnits() 每隔 1 个位置输出一个字符：偶数索引（0,2,4,…）显示 i % 10，奇数索引填充空格，形成“0 2 4 6 8 0 2…”节奏；
- getTens() 仅在索引能被 10 整除时（即 i % 10 === 0）显示 Math.floor(i / 10)，其余位置为空格，确保十位数字垂直居中对齐个位标尺；
- 循环上限设为
⚠️ 注意事项：
- 标尺基于字符索引（非字节或 Unicode 码点），适用于常规 ASCII/UTF-16 字符串；若含代理对（如某些 emoji），需额外处理；
- 控制台输出使用 \n 换行，确保三行严格对齐；如需高亮原字符串，可结合 %c 样式（如 console.log(%c${str}\n%c${units}\n%c${tens}, 'color: blue', '', '')）；
- 函数无副作用、纯函数式，可直接集成至调试工具库或 DevTools Snippets 中复用。
这一方案将硬编码标尺升级为智能生成器，让字符串索引可视化真正“随长而变”，是提升日常调试精度与效率的实用小技巧。
