使用`valueAsNumber`

Question

我是javascript的新手，我正在尝试学习JS中的函数等并尝试添加2个数字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS ADD</title>
</head>

<body>

  <h1>Funcitons is JS</h1>


  <input type="number" id="num1">
  <input type="number" id="num2">

  <button type="button" onclick="addNumAction()">
    Add
  </button>

  <script>
    function addNum(n1, n2) {
      return parseInt(n1) + parseInt(n2);
    }

    function addNumAction() {
      var n1 = document.getElementById("num1").value;
      var n2 = document.getElementById("num2").value;

      var sum = addNum(n1, n2);
      window.alert("" + sum);

    }
  </script>

</body>

</html>

如果删除parseInt（），该值仅被视为字符串，那么使用<input type="number">有什么意义？请向我解释。用什么字段来输入数字？

Answer 1

你得到一个字符串是正常的。

数字类型的目的是移动浏览器使用它来显示正确的键盘，而某些浏览器使用它来进行验证。例如，email类型将显示带有@和＆＃39;的键盘。＆＃39;在键盘上，number将显示数字键盘。

Answer 2

HTML和HTTP都没有真正具有数据类型的概念（可能因为它们不是以编程语言开头）而且一切都是字符串。当您使用其他语言来获取该信息时，您有时可能会获得一些 magic 作为一项功能（例如，PHP将从GET / POST字段生成数组，这些字段的名称上包含成对的方括号）但这是其他语言的特征。

在这种情况下，.value属于DOM API，此类API确实具有types。但是，让我们看看它是如何定义的。 <input>标记由HTMLInputElement interface表示，value属性由type DOMString表示：

DOMString是UTF-16字符串。由于JavaScript已经使用了这样的字符串 DOMString直接映射到字符串。

换句话说，type="number"是一个提示实现客户端验证和适当的GUI控件的提示，但底层元素仍将存储字符串。

Numeric keyboard screen-shot

Answer 3

HTML记录输入元素以返回表示数字的字符串。请参阅此处的文档：Documentation of HTML Input
设置输入类型=＆＃34;数字＆＃34;然后这些输入字段不接受非数字输入，但同时它不会输入输入值类型＆＃34;数字＆＃34;。原因是输入的数字包含数字作为有效字符的子集，但它们也包含完全非数字字符，如空格，连字符和括号。

Answer 4

tl;博士你已经正确地做了一切，只是继续使用parseInt。

型=＆＃34;数＆＃34;告诉浏览器，只允许用户输入数字字符，但在内心深处，它仍然是文本字段。

Answer 5

使用`valueAsNumber`

仍然可以输入非数字。确保检查有效性，并处理错误。

const value = myInput.valueAsNumber
if (isNaN(value)) return // or other handling

如果您需要每次更改进行更新：

myInput.addEventListener("change", () => {
    const newValue = myInput.valueAsNumber
    if (isNan(newValue)) return

    // Handle change
})

Answer 6

type="number"仅用于浏览器验证。但你得到一个字符串。您可以在字符串之前使用parseInt(num1)或+。

function addNum(n1, n2) {
  return +(n1) + +(n2);
}

Answer 7

您可以使用valueAsNumber（在该页面上描述）来获取实际的数字值。所以你的代码就是：

function addNum(n1, n2) {
  return n1 + n2;
}

function addNumAction() {
  var n1 = document.getElementById("num1").valueAsNumber;
  var n2 = document.getElementById("num2").valueAsNumber;

  var sum = addNum(n1, n2);
  window.alert("" + sum);

}

Answer 8

您还可以尝试使用 + 运算符将数字字符串转换为数字：

const ns = '3'
console.log(typeof ns)
console.log(typeof +ns)

或者您可以安全地进行转换：

const ns = '3'
const s = 'hello'

const toNum = v => !!+v ? +v : v

console.log(typeof toNum(ns))
console.log(typeof toNum(s))

以上代码段使用 + 将值转换为数字。如果它不能这样做，+v 返回 NaN。然后使用 ! 将 NaN 转换为布尔值，然后使用另一个 ! 否定布尔值。

从javascript

8 个答案:

使用`valueAsNumber`

从javascript

8 个答案:

使用valueAsNumber

使用`valueAsNumber`