javascript - 带小数和单位的负/正值

Question

我正在寻找一个输入字段，它只接受带有小数和预定义(在数组中)的负/正值单位位于输入末尾。

可接受的示例值为:

var inputValue = "150px"; <---- This could be anything (from the input).
var units = ["px", "em", "%"];
var defaultUnit = "px";


100px, 100em, 100%
-100px, -100em, -100%
-100.50px, -100.50em, -100.50%

最后，我需要将“单位”和值保存在变量中。如果用户没有提供单位，那么我应该指定默认值(px)作为单位。

var value = 100;
var unit = %;

我想不出一种方法以纯 javascript 或 ES15 方式完成所有这些工作。谁能指导我吗？

Answer 1

使用regex match operation可以这样做:

function splitToValueAndUnit(string) {
  if(!string) {
    return { value: "", unit: "px" };
  }
  string = string.toString();
  var value = string.match(/[+-]?\d*[.]?\d*/)[0];
  var unit = string.replace(value, "")
  return {
    value: value,
    unit: unit || "px"
  }
}



console.log(splitToValueAndUnit("123px"))
console.log(splitToValueAndUnit("123%"))
console.log(splitToValueAndUnit("123"))
console.log(splitToValueAndUnit("-123"))
console.log(splitToValueAndUnit("-123px"))
console.log(splitToValueAndUnit("-123.099%"))
console.log(splitToValueAndUnit(""))
console.log(splitToValueAndUnit())
console.log(splitToValueAndUnit(123))
console.log(splitToValueAndUnit(undefined))