kFormatter函数无法添加k/M后缀，如何实现YouTube式数字格式化？

我希望实现类似YouTube的数字格式化效果（如1.2k、5.1M等），但当前的kFormatter函数仅能格式化数字，无法添加k或M后缀。相关代码如下：

HTML片段：

<p onclick="handleLike('')" class="btn btn-primary" style="background: #F2BE22;"> <%= element.like %></p>

JavaScript代码：

function kFormatter(num) { 
  return Math.abs(num) > 999 ? Math.sign(num) * ((Math.abs(num) / 1000).toFixed(1)) + 'k' : Math.sign(num) * Math.abs(num); 
}
window.addEventListener('DOMContentLoaded', function() { 
  var likeCountElements = document.querySelectorAll('[id^="likeCount"]'); 
  likeCountElements.forEach(function(element) { 
    element.textContent = kFormatter(currentLikes); 
  }); 
});

目前该函数仅能格式化数字，却不添加k后缀，请问如何修改以达到预期效果？

问题分析与修复方案 #

1. 原代码的核心问题 #

原函数逻辑本身没问题，但存在两个关键漏洞：

• 未正确获取元素内的点赞数：代码里的currentLikes是未定义的变量，没法拿到实际要格式化的数字
• 只支持千级（k）格式化，没覆盖百万级（M）的场景

2. 扩展后的完整格式化函数 #

下面的函数同时支持k（千）和M（百万）的格式化，还会自动去掉末尾多余的.0，和YouTube的显示逻辑对齐：

function formatNumber(num) {
  const absNum = Math.abs(num);
  // 处理百万级数字
  if (absNum >= 1000000) {
    const formatted = (absNum / 1000000).toFixed(1);
    // 用parseFloat去掉末尾的.0，比如1.0M变成1M
    return Math.sign(num) * parseFloat(formatted) + 'M';
  }
  // 处理千级数字
  if (absNum >= 1000) {
    const formatted = (absNum / 1000).toFixed(1);
    return Math.sign(num) * parseFloat(formatted) + 'k';
  }
  // 小于1000的数字直接返回原数
  return num;
}

3. 修复DOM加载逻辑 #

把未定义的currentLikes替换为从元素文本中获取的实际数值：

window.addEventListener('DOMContentLoaded', function() { 
  const likeCountElements = document.querySelectorAll('[id^="likeCount"]'); 
  likeCountElements.forEach(function(element) { 
    // 提取元素内的数字并转为数值类型
    const currentLikes = parseInt(element.textContent.trim(), 10);
    // 格式化后重新赋值给元素
    element.textContent = formatNumber(currentLikes); 
  }); 
});

4. 效果验证 #

修改后，不同数值会被正确格式化：

• 999 → 999
• 1200 → 1.2k
• 1000000 → 1M
• 5100000 → 5.1M

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