如何使用JavaScript对带不同尺寸单位的列表项进行正确排序

方案1：使用自定义数据属性（最推荐） #

这是成本最低、出错概率最小的实现方式，不需要做复杂的单位解析：

• 给每个<li>添加data-size-cm自定义属性，直接存储转换为厘米后的数值作为排序基准

修改后的HTML示例：

<ul class="list-name">
  <li class="other-classes size-10-CM" data-size-cm="10">10 CM</li>
  <li class="other-classes size-1V5-METRO" data-size-cm="150">1,5 M</li>
  <li class="other-classes size-2-METROs" data-size-cm="200">2 M</li>
  <li class="other-classes size-10-CM" data-size-cm="20">20 CM</li>
</ul> 

对应的JS排序代码：

const list = document.querySelector('.list-name');
const items = Array.from(list.children);
// 按data-size-cm的数值升序排序
items.sort((a, b) => {
  return Number(a.dataset.sizeCm) - Number(b.dataset.sizeCm);
});
// 重新插入到列表中完成排序
items.forEach(item => list.appendChild(item));

这个方案完全不需要处理类名、文本的格式适配问题，后续单位规则变更也只需要调整属性值即可，性能和可维护性都是最优的。

方案2：无法修改HTML结构时的轻量解析方案 #

如果确实不能修改原有HTML添加自定义属性，也可以做简单的单位解析，逻辑并不复杂：

• 优先从li的文本内容提取数值和单位，或从类名匹配size-开头的片段
• 统一转换为厘米数值后再排序

参考代码：

const list = document.querySelector('.list-name');
const items = Array.from(list.children);

// 尺寸转厘米的工具函数
function getCmValue(item) {
  // 这里以解析文本为例，也可以替换为解析类名的逻辑
  const text = item.textContent.trim();
  // 替换逗号为小数点，提取数值和单位
  const [, numStr, unit] = text.match(/([\d,]+)\s*(CM|M)/) || [];
  const num = Number(numStr.replace(',', '.'));
  return unit === 'M' ? num * 100 : num;
}

// 排序
items.sort((a, b) => getCmValue(a) - getCmValue(b));
items.forEach(item => list.appendChild(item));

如果需要从类名解析，只需要修改getCmValue函数的匹配逻辑，匹配类名中size-开头的片段，把V替换为小数点，METRO相关的统一按米处理即可。

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