当前位置：首页 > article >正文

《JavaScript 中数据类型判断、转换技巧及应用实例》

article 2025/1/4 9:44:21

一、数据类型判断

（一）typeof 运算符

二、数据类型转换

（一）字符串转数字

三、应用实例分析

一、数据类型判断

（一）typeof 运算符

基本用法：在 JavaScript 中，typeof是一个非常有用的单目运算符，用于判断变量的数据类型。我们可以直接在变量名之前加上typeof来获取变量的数据类型信息，也可以把它当作方法来使用，如typeof()，将需要判断的内容作为参数传进去。

二、数据类型转换

（一）字符串转数字

转换方法：在 JavaScript 中，我们可以使用parseInt()和parseFloat()方法将字符串转换为数字。
- 纯数字字符串：当字符串是纯数字的时候，这些方法可以正常地将字符串转换为对应的数字。
- 数字与字母混合字符串：如果字符串开头是数字，后边有字母，那么转换时会从第一个字母后边整体截掉，只保留前面的数字部分进行转换。
- 字母开头字符串：当字符串开头就是字母时，转换的结果为NaN（Not a Number）。
判断是否为 NaN：为了判断一个值是否为NaN，JavaScript 提供了isNaN()方法。当传入的值是NaN时，该方法返回true，否则返回false。

三、应用实例分析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script>
    window.onload = function() {
        var btn = document.querySelector(".btn");
        var container = document.querySelector(".container");
        var money = document.querySelector(".money");
        var timer;
        var change = function(target) {
            // container.innerHTML=parseInt(container.innerHTML)+parseInt(money.value)

            container.innerHTML = parseInt(container.innerHTML) + 1
            if (container.innerHTML >= target) {
                clearInterval(timer)
            }
        }
        btn.onclick = function() {
            var target = parseInt(container.innerHTML) + parseInt(money.value)
            if (!isNaN(parseInt(money.value))) {
                //    change()
                timer = setInterval(function() {
                    change(target)
                }, 1000)
            } else {
                alert("金额必须是数字")
            }
        }
    }
</script>

<body>
    <div class="container">
        10
    </div>
    转账金额：<input type="text" class="money">
    <input type="button" value="转账" class="btn">
</body>

</html>

在这个实例中：