从 javascript 访问时，HTML input type="number" 仍然返回一个字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35791767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input type="number" still returning a string when accessed from javascript
提问by Sainath S.R
I'm new to javascript , I'm trying learning how functions etc in JS and trying to add 2 numbers
我是 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>If I remove the parseInt() the value is treated as a string only , then what is the point of using <input type="number">?please explain to me.
what field to use for getting input as a number?
如果我删除 parseInt() 值仅被视为字符串，那么使用的意义是<input type="number">什么？请向我解释。使用哪个字段作为数字获取输入？
回答by Arno Chauveau
It's normal you get a string.
你得到一个字符串是正常的。
The purpose of the number type is that mobile browsers use this for showing the right keyboards and some browsers use this for validation purposes. For example the emailtype will show a keyboard with the @ and '.' on the keyboard and numberwill show a numeric keyboard.
数字类型的目的是移动浏览器使用它来显示正确的键盘，一些浏览器使用它来进行验证。例如，该email类型将显示带有 @ 和 '.' 的键盘。在键盘上，number将显示一个数字键盘。
回答by álvaro González
Neither HTML nor HTTP really have the concept of data types (possibly because they aren't programming languages to begin with) and everything is a string. When you use another language to reach that information you may sometimes get some amount of magicas a feature (for instance, PHP will generate arrays from GET/POST fields that have paired square brackets on their names) but that's a feature of such other language.
HTML 和 HTTP 都没有数据类型的概念（可能是因为它们不是编程语言），一切都是字符串。当您使用另一种语言来获取该信息时，有时您可能会获得一些神奇的功能（例如，PHP 将从名称上带有成对方括号的 GET/POST 字段生成数组），但这是其他语言的功能.
In this case, .valuebelongs to the DOM API and such API does have types. But let's see how it's defined. The <input>tag is represented by the HTMLInputElementinterfaceand the valueproperty is of type DOMString:
在这种情况下，.value属于 DOM API 并且此类 API 确实具有types。但是让我们看看它是如何定义的。所述<input>标签由表示HTMLInputElement界面和value属性是类型DOMString：
DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.
DOMString 是一个 UTF-16 字符串。由于 JavaScript 已经使用了此类字符串，因此 DOMString 直接映射到String。
In other words, type="number"is a hint to implement client-side validation and appropriate GUI controls but the underlying element will still store strings.
换句话说，type="number"是实现客户端验证和适当的 GUI 控件的提示，但底层元素仍将存储字符串。
回答by webb
tl;dr you're doing everything correctly already, just keep using parseInt.
tl;dr 你已经做对了一切，继续使用 parseInt。
type="number" tells the browser that the user should only be allowed to enter number characters, but deep down, it's still a text field.
type="number" 告诉浏览器应该只允许用户输入数字字符，但在内心深处，它仍然是一个文本字段。
回答by secretgenes
HTML Input elements are documented to return string representing a number. See the documentation here : Documentation of HTML Input
When you set input type="number" then these input field don't accept non numeric input but at the same time it doesn't make the input value type "number". The reason is inputted number contain digits as a subset of the valid characters, but they also contain completely non-numeric characters like spaces, hyphens and parenthesis.
HTML Input 元素被记录为返回表示数字的字符串。请参阅此处的文档：HTML 输入文档
当您设置 input type="number" 时，这些输入字段不接受非数字输入，但同时不会使输入值类型为“number”。原因是输入的数字包含数字作为有效字符的子集，但它们也包含完全非数字的字符，如空格、连字符和括号。
回答by Chris Shepherd
You can use valueAsNumber(described on that page) to get the actual number value. So your code would then be:
您可以使用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);
}
回答by Julia Shirokova
type="number"only for browser validation. But you get a string. And you may use parseInt(num1)or +before string.
type="number"仅用于浏览器验证。但是你得到一个字符串。并且您可以在字符串之前使用parseInt(num1)或+。
function addNum(n1, n2) {
return +(n1) + +(n2);
}
