如何在 Javascript 中将变量的值从字符串转换为整数
How do you convert the value of a variable from a string to an integer in Javascript?
我做了一个小提琴! https://jsfiddle.net/ajc100/vrzme0st/
我正在尝试制作一个保险计算器(使用假数字(。它由一个带有单选按钮和下拉列表的表单组成,每个单选按钮或下拉列表的值是一个数字。我使用警报来显示正在根据用户选择的内容应用正确的数字。我现在需要做的是将这些数字加在一起以获得总数。我遇到的问题是我不确定如何将变量的值(数字(转换为整数,以便 Javascript 将其理解为数字并可以添加它。这是我的代码。(实际上是Jquery(。如您所见,我已经尝试了一些不同的方式来将变量的值转换为数字,但似乎没有任何效果。任何帮助将不胜感激。
<ul>
<li><form id="sex"><legend>Sex</legend> <fieldset>
<input type="radio" name="sex" value="20" id="Female" class="firstInput css-checkbox" />
<label class="css-label" for="Female">Female</label>
<input type="radio" name="sex" value="30" id="Male" class="css-checkbox" />
<label class="css-label" for="Male">Male</label></fieldset>
</form>
</li>
<li>
<form id="age"><legend>Age</legend><fieldset>
<input type="radio" id="sixteen" name="age" value="40" class="firstInput css-checkbox" />
<label class="css-label" for="sixteen">16-25</label>
<input id="twentysix" type="radio" name="age" value="30" class="css-checkbox" />
<label class="css-label" for="twentysix">26-34</label>
<input type="radio" id="thirtyfive" name="age" value="20" class="css-checkbox" />
<label class="css-label" for="thirtyfive">35-50</label>
<input type="radio" name="age" id="fifty" value="15" class="css-checkbox" />
<label class="css-label" for="fifty">50+</label></fieldset>
</form>
</li>
<li>Car Color
<select name="color" id="car">
<option value="80">red</option>
<option value="50">silver</option>
<option value="50">black</option>
<option value="30">white</option>
<option value="50">other</option>
</select>
</li>
<li>Car Year
<select name="year" id="year">
<option value="60">2015+</option>
<option value="40">2000 - 2015</option>
<option value="60">1999 or before </option>
</select></li>
<li>Citations in past year
<select name="citations" id="citations">
<option value="20">1</option>
<option value="30">2</option>
<option value="40">3+</option>
</select>
</li>
</ul>
<hr>
<div class="total">Total</div>
</div>
<script>
$('#sex input').on('change', function() {
var sex = ($('input[name="sex"]:checked', '#sex').val());
parseInt(sex);
alert(sex);
});
$('#age input').on('change', function() {
var age = ($('input[name="age"]:checked', '#age').val());
number(age);
alert(age);
});
$('#car').on('change', function() {
var car = parseInt($('#car').val(),10);
alert(car);
});
$('#year').on('change', function() {
var year = +($('#year').val());
alert(year);
});
$('#citations').on('change', function() {
var citations = ($('#citations').val());
parseInt(citations);
alert(citations);
});
我试过这个,但它仍然不起作用。即使将它们切换为数字,我似乎也无法将变量加在一起:
<script>
$(document).ready(function() {
$('#sex input').on('change', function() {
sex = ($('input[name="sex"]:checked', '#sex').val());
sex = +sex;
});
$('#age input').on('change', function() {
age = ($('input[name="age"]:checked', '#age').val());
age = +age;
});
$('#car').on('change', function() {
car = ($('#car').val());
car = +car;
});
$('#year').on('change', function() {
year = ($('#year').val());
year = +year;
});
$('#citations').on('change', function() {
citations = ($('#citations').val());
citations = +citations;
});
var total = sex + age + car + year + citations;
$(".total").text("Total: " + total);
});
</script>
parseInt
和Number
是返回数值的函数。他们不会改变论点。
所以写:
sex = parseInt(sex);
或:
age = number(age);
但更简单和最有效的是单一加号:
age = +age;
您不会显示添加变量值的代码,但在像这样转换它们后,您可以按预期添加它们。
事件顺序和自动创建的变量
代码的问题在于,当页面加载时,当点击处理程序(sex
、age
、...(没有设置任何变量时,您计算总数。相反,它们是由浏览器自动为每个具有"id"属性的元素创建一个变量的规则设置的,该变量具有该名称。但是这些变量代表 DOM 元素,因此您的总数无法正常工作。此外,当用户更改选择时,该总数永远不会更新。
相反,我建议使用以下代码:
function refreshTotal() {
var sex = +$('input[name="sex"]:checked', '#sex').val();
var age = +$('input[name="age"]:checked', '#age').val();
var car = +$('#car').val();
var year = +$('#year').val();
var citations = +$('#citations').val();
var total = sex + age + car + year + citations;
$(".total").text("Total: " + total);
}
// Create one handler for all input/select changes:
$('input,select').on('change', refreshTotal);
// Also at page load, calculate the total
$(refreshTotal);
当你调用一个函数时,你通常需要在某个地方分配结果;函数不能改变变量本身的值(将对象作为参数的函数可以修改对象的内容,但这与修改调用中使用的变量不同(。当你写的时候
parseInt(sex);
它调用函数,但不对结果执行任何操作。您需要做:
sex = parseInt(sex, 10);
在调用parseInt
时,您还应该始终指定基数;规范不要求默认情况下它是十进制的,并且一些旧浏览器具有不同的默认值。
你可以通过以下方式将字符串转换为 int
var a = "10";
var b = parseInt(a);
希望对您有所帮助!
- 如何在JavaScript中将字符串转换为函数引用
- 如何在 Javascript 中将变量的值从字符串转换为整数
- 将字符串转换为格式化日期
- IE在将字符串转换为日期时从日期中删除4小时
- node.js将字符串转换为要上传到Web服务器的文件
- 将字符串转换为JS对象
- 在js中将字符串转换为十六进制
- 试图了解如何使用parseFloat将字符串转换为数字
- 如何在html中将字符串转换为数字?以及如何将变量传递到scriptlet代码中
- 将字符串转换为GWT中的JSON对象(JSNI)
- 如何使用Razor显示模板将字符串转换为html字符串
- 将字符串转换为数组编号Javascript
- js字符串转换为具有两个值的对象
- 转换<a>使用jQuery将文本字符串转换为dom元素
- Jquery-将字符串转换为reg exp对象
- 使用JavaScript将客户端日期/时间字符串转换为JSON日期/时间串
- 将JavaScript字符串转换为整数
- moment js,将EST字符串转换为UTC
- 如何在javascript中将字符串转换为有效日期
- 通过JQuery将字符串转换为JSON