已知百分比对应数值求未知总量的JavaScript算法实现

你可以用下面的JavaScript函数实现这个计算逻辑，函数会自动处理带px、%单位的输入值，默认返回100%对应的最大宽度，也支持自定义目标百分比计算对应宽度：

/**
 * 根据已知宽度和对应百分比，计算目标百分比对应的宽度
 * @param {string} currentWidthStr 当前宽度，格式如'500px'
 * @param {string} currentPercentStr 当前对应的百分比，格式如'70%'
 * @param {number} targetPercent 目标百分比，默认为100（即求最大宽度）
 * @param {boolean} withUnit 返回值是否带px单位，默认为true
 * @returns {string|number} 目标宽度
 */
function calcTargetWidth(currentWidthStr, currentPercentStr, targetPercent = 100, withUnit = true) {
  // 提取数值：移除单位后转换为数字
  const currentWidth = Number.parseFloat(currentWidthStr.replace('px', ''));
  const currentPercent = Number.parseFloat(currentPercentStr.replace('%', ''));
  // 按照比例公式计算后取整，和你示例的计算结果对齐
  const targetWidth = Math.round((currentWidth / currentPercent) * targetPercent);
  return withUnit ? `${targetWidth}px` : targetWidth;
}

使用示例 #

• 计算100%对应的最大宽度：

const maxWidth = calcTargetWidth('500px', '70%');
console.log(maxWidth); // 输出结果：714px

• 计算自定义百分比对应的宽度，比如求35%对应的宽度：

const targetWidth = calcTargetWidth('500px', '70%', 35);
console.log(targetWidth); // 输出结果：250px

如果不需要对结果取整，可以删除Math.round方法；如果需要保留指定小数位，可以替换为.toFixed(n)（n为要保留的小数位数）。

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