JavaScript 中处理数字和日期输入的方法

valueAsNumber

你可能之前写过这样的代码：

export function NumberInput() {
  const [number, setNumber] = useState(0)

  return (
    <input
      type="number"
      value={number}
      onChange={(e) => {
        const num = parseFloat(e.target.value)
        setNumber(num)
      }}
    />
  )
}

这样写没有问题，但其实有一种更好的方式来读取数字值。

我指的是这部分代码：

// 🚩 不必要的解析！
const num = parseFloat(e.target.value)

没错，自从 IE10 时代开始，我们就有了更好的方式来获取和设置数字值：

// 🤯
const num = e.target.valueAsNumber

因此，更好的解决方案可以是：

export function NumberInput() {
  const [number, setNumber] = useState(0)

  return (
    <input
      type="number"
      value={number}
      onChange={(e) => {
        // ✅
        const num = e.target.valueAsNumber
        setNumber(num)
      }}
    />
  )
}

当然，你不需要用 React 来实现这一点。这只是标准的 JavaScript，适用于任何框架。

你同样可以查询一个 DOM 节点并使用它：

const myInput = document.querySelector('input.my-input')
const number = myInput.valueAsNumber

而且，重要的是，你也可以对其进行写操作！

myInput.valueAsNumber = 123.456

一个小陷阱

valueAsNumber 的类型总是一个数字。因此，如果输入当前没有设置任何值，你将会得到 NaN 作为值。

别忘了…

typeof NaN // 'number'

是的，这是 JavaScript 中有趣的部分之一。因此，在将 valueAsNumber 写入期望实际数字的地方之前，确保检查它是否为 NaN。

const number = myInput.valueAsNumber
if (!isNaN(number)) {
  // 我们实际上有一个“数字”数字
}

valueAsDate

但等等，还有更多！

对于日期输入，我们还有一个很方便的 valueAsDate 属性：

export function DateInput() {
  const [date, setDate] = useState(null)

  return (
    <input
      type="date"
      value={date}
      onChange={(e) => {
        // ✅
        const date = e.target.valueAsDate
        setDate(date)
      }}
    />
  )
}

很漂亮。

对于那些不使用 React（或者性能更好的 Qwik，它看起来像 React），你当然也可以用纯 HTML 和 JavaScript 来实现：

const myDateInput = document.querySelector('input.my-date-input')
const date = myDateInput.valueAsDate

正如预期的那样，你也可以对其进行写操作：

myDateInput.valueAsDate = new Date(0)

没有陷阱

幸运的是，对于 valueAsDate，当输入为空时，我们得到的只是 null。

所以你只需检查值是否为真值：

const date = myDateInput.valueAsDate
if (date) {
  // 我们得到了一个日期！
}

浏览器支持

这并不是什么新的API。即使这是你第一次了解到这些属性，它们已经存在很多年了，甚至可以追溯到 IE10 时代。

结论

现在我们知道如何使用 valueAsNumber 和 valueAsDate 属性来将数字和日期输入分别处理为真正的数字和日期值。