JavaScript中如何将带单位字符串转为数字并保留单位以便转回原字符串？

要同时实现数值计算和保留单位以便转回原字符串，核心思路是把字符串中的数值部分和单位部分分开存储，而不是只保留数值。下面是具体的实现方案：

方法：正则拆分数值与单位 #

用正则表达式匹配字符串中的数字（支持整数、小数）和单位部分，将两者分别提取后存储，计算时用数值，还原时拼接数值和单位即可。

示例代码：

// 解析带单位的字符串，返回包含数值和单位的对象
function parseUnitString(str) {
  // 正则匹配：捕获数字（整数/小数）和后续的单位（允许数字与单位间有空格）
  const result = str.match(/^(\d+\.?\d*)\s*(.*)$/);
  if (!result) {
    return { value: NaN, unit: "" }; // 处理无效输入
  }
  return {
    value: parseFloat(result[1]),
    unit: result[2].trim() // 去除单位前后的多余空格
  };
}

// 使用示例
const parsedData = parseUnitString("100 MB");
console.log(parsedData.value); // 100（可直接用于计算）
console.log(parsedData.unit);  // "MB"

// 计算后转回原格式
parsedData.value *= 2;
const restoredString = `${parsedData.value} ${parsedData.unit}`;
console.log(restoredString); // "200 MB"

适配更多场景：

这个方法也能处理单位与数字紧连的情况（如"512KB"）、带小数的数值（如"2.5 GB"）：

console.log(parseUnitString("512KB")); // { value: 512, unit: "KB" }
console.log(parseUnitString("2.5 GB")); // { value: 2.5, unit: "GB" }

为什么不只用单一数值？ #

parseFloat()只能提取数值，会永久丢失单位信息，无法直接还原原字符串。通过拆分存储数值和单位，既能满足计算需求，又能随时拼接回原格式的字符串。

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