JavaScript处理数组生成对齐字符串 将填充符#替换为空格的实现问题

解决方法 #

你只需要调整2个核心逻辑即可实现需求：

• 将padEnd的填充字符从#改为空格，同时先清理ref1字段里的不可见特殊字符（你给出的示例数据里ref1自带了大量零宽左到右标记，会导致字符串长度计算和实际显示长度不符，是当前对齐失效的核心原因）
• 可选优化：动态计算所有ref1和price_u的最大长度做适配，避免硬编码固定长度导致后续新增数据时对齐失效

修改后完整代码 #

// 修正原数组语法错误，原数组的0:1:这种写法不符合对象数组规范
var quote = [
  {ref1: 'CE255X', price_u: '1024100'},
  {ref1: 'M-TK137', price_u: '65400'},
  {ref1: '126A‎‎‎', price_u: '242300'},
  {ref1: 'M-CE278A', price_u: '35000'},
  {ref1: 'M-Q2612A‎‎‎‎‎‎', price_u: '35000'},
  {ref1: 'M-Q7551X', price_u: '130002'},
  {ref1: '507A', price_u: '905300'},
  {ref1: 'M-35A/36A/85A/78A', price_u: '35000'},
]

// 清理不可见字符的工具方法
function cleanInvisible(str) {
  // 匹配所有零宽类不可见字符并移除
  return str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, '')
}

// 预计算最大长度，适配所有数据
let maxRefLength = Math.max(...quote.map(item => cleanInvisible(item.ref1).length))
let maxPriceLength = Math.max(...quote.map(item => item.price_u.length))

let detail = '';
quote.forEach((item, index) => {
  const cleanedRef = cleanInvisible(item.ref1)
  if (cleanedRef.length <= 50) {
    // 序号部分补位，避免超过10条时序号长度变化导致错位
    const prefix = `${index+1}.`.padEnd(3, ' ')
    // ref1补空格到最大长度，再加2个分隔空格
    const refPart = cleanedRef.padEnd(maxRefLength + 2, ' ')
    // 价格右对齐补空格
    const pricePart = item.price_u.padStart(maxPriceLength, ' ')
    detail += prefix + refPart + pricePart + '\n'
  }
})
console.log(detail)

输出效果示例 #

1.  CE255X                  1024100
2.  M-TK137                  65400
3.  126A                    242300
4.  M-CE278A                 35000
5.  M-Q2612A                 35000
6.  M-Q7551X                130002
7.  507A                    905300
8.  M-35A/36A/85A/78A        35000

如果你不需要动态计算长度，只想修改原有代码，直接把padEnd(38, '‎‎‎#')改成padEnd(38, ' ')，同时给price_u加padStart(7, ' ')也可以实现效果，仅适配性稍差。

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