你如何在javascript中做CSS单元数学并保留CSS单元？答案

【问题标题】：How do you do CSS unit math in javascript and retain the CSS unit?你如何在javascript中做CSS单元数学并保留CSS单元？
【发布时间】：2016-04-14 17:37:08
【问题描述】：

我有一个变量，半径设置为“20%”。在我的代码中，我想将高度设置为半径的两倍 -

height = radius * 2;

无论半径是“20%”、“20px”、“20em”还是“20vw”，并且结果是“40%”、“40px”或“40em”，我都希望它能够工作, 或 '40vw'。

（我正在使用 Reactjs 并且可以访问 Radium）

【问题讨论】：

将数字与单位分开，进行数学运算，然后将原始单位连接回结果。
@Pointy 这是我的后备解决方案。希望有更优雅的方式。
或者使用预处理器和相应的加载器
height = "calc(2*" + radius + ")"怎么样
@wero - 我喜欢这种方法。有点担心在旧版浏览器中使用calc 生成内容。我会做一些测试，看看效果如何。

标签： javascript css reactjs

【解决方案1】：

你可以用parseFloat解析出数字，字符串的其余部分是单位：

var value = "123px";

var n = parseFloat(value);
var u = value.trim().substring(n.toString().length);

console.log("number:", n, "units:", u, "value:", n + u);
// Output: number: 123 units: px value: 123px

或者您可以使用正则表达式（感谢 cmets 中的 brendangibson）：

var value = "123px";
var matched = value.match(/(\d+)([^\d]*)$/);
var num = matched[1], unit = matched[2];

还有一个解构数组赋值：

let [all, num, unit] = value.match(/(\d+)([^\d]*)$/);

或者您可以使用众多 JS libraries 之一为您完成此操作。

【讨论】：

试试value = " 123px"。转换为数字然后转换为字符串不是恒等函数，空格消失了。然后substring 从错误的位置开始。
@Oriol 是的，需要修剪来避免这种情况，但是有这样的前导空格是很不寻常的......即使你设置了style.left = " 123px"，你得到的解析值也是@987654329 @.
const [all, value, unit] = length.toString().match(/(\d+)([^\d]*)$/);
@brendangibson 我想你的意思是[all, num, unit] = value.match()... ;) 不错的正则表达式，发布答案？