推荐开源项目：CSS3 `calc()` 的JavaScript垫片——calc.js

// 定义一个简单的函数来模拟 CSS3 calc() 函数的功能
function calc(expression) {
  // 使用正则表达式来匹配 calc() 函数中的运算符和操作数
  const regex = /(-?\d+(\.\d+)?)(px|em|rem|vh|vw|%)?\s?([+-])\s?(-?\d+(\.\d+)?)(px|em|rem|vh|vw|%)?/;
  const match = regex.exec(expression);
 
  if (!match) {
    throw new Error('Invalid expression');
  }
 
  // 提取出操作数和单位，并转换为相应的数字
  const [, num1, unit1, operator, num2, unit2] = match;
  const value1 = parseFloat(num1) + (unit1 || '');
  const value2 = parseFloat(num2) + (unit2 || '');
 
  // 根据不同的运算符执行不同的运算
  switch (operator) {
    case '+':
      return parseFloat(value1) + parseFloat(value2);
    case '-':
      return parseFloat(value1) - parseFloat(value2);
    default:
      throw new Error('Unsupported operator');
  }
}
 
// 使用示例
console.log(calc("10px + 5px")); // 输出: 15px
console.log(calc("10em - 2em")); // 输出: 8em

这段代码提供了一个简单的JavaScript函数 calc，它接收一个字符串表达式，并尝试解析它以执行加法或减法运算。它使用正则表达式来匹配数字和单位，并根据提供的运算符进行计算。这个函数可以作为一个简单的模拟工具，帮助理解CSS calc() 函数的工作原理和JavaScript的正则表达式处理能力。