JS | parseInt() 改变 stringNumber & stringWord |解决方案？答案

【问题标题】：JS | parseInt() changes stringNumber & stringWord | solution?JS | parseInt() 改变 stringNumber & stringWord |解决方案？
【发布时间】：2018-03-23 08:28:35
【问题描述】：

parseInt() 有问题。当我从输入（代码中的annualInput）中获取一个字符串例如car 时，parseInt() 将其更改为一个数字。我只想将输入的数字（字符串）更改为数字，因此我可以使用typeof numberValue == 'number'。感谢您对代码的任何帮助。

function wage() {
    let input = document.getElementById('annualInput').value;
    let output = document.getElementById('resultMonthly');
      
    // annual wage devided by 12 months
    let resultMonthly = input / 12;
    let showMonthly = 'Your monthly wage: ' + resultMonthly.toFixed(2);
    
    // monthly wage devided by 20 days
    let resultDaily = resultMonthly / 20;
    let showDaily = 'Your daily wage: ' + resultDaily.toFixed(2);
    
    // daily wage devided by 8 hours
    let resultHourly = resultDaily / 8;
    let showHourly = 'Your hourly wage: ' + resultHourly.toFixed(2);
    
    input = +input;

     //check if input is empty and if string is number
     if (input) {
         if (isNaN(input) !== true) {
            document.getElementById('resultMonthly').innerHTML = showMonthly + ' $';
            document.getElementById('resultDaily').innerHTML = showDaily + ' $';
            document.getElementById('resultHourly').innerHTML = showHourly + ' $';
         } 
         else {
        document.getElementById('resultMonthly').innerHTML = 'Please, type your annual wage';
        document.getElementById('resultDaily').innerHTML = "e.g 125000";
        document.getElementById('resultHourly').innerHTML = "and click the button 'check'";
         }
     }

    
    // switch option for wage occupation
    let storeWage;
    let dev = document.getElementById('dev').value;
    
    switch(dev) {
        case "junior developer":
            storeWage = "40 000 $";
            break;
        case "mid developer":
            storeWage = "75 000 $";
            break;
        case "senior developer":
            storeWage = "120 000 $";
            break;
        default:
            storeWage = "Choose one category of developers";
    }
    document.getElementById('devOutput').innerHTML = "Estimated wage for " + dev + ": " + storeWage;
    
    
      //  alert typeof shows number when typed either string or number
    let getValue = document.getElementById("annualInput").value
    document.getElementById("devOutput").innerHTML = getValue;
    let numberValue = parseInt(getValue);
    alert(typeof numberValue);
   
    if (numberValue !== '') {
        // this if doesn't work even with string and number
         if (typeof numberValue == 'number')
            document.getElementById('result').innerHTML = "great" + numberValue;
        else alert("try again")
    } else {
        document.getElementById('result').innerHTML = 'Please, type your annual wage';
    }
    
    
}

<!DOCTYPE html>
<html>
<head>
<title>Wage App</title>
    <meta charset="utf-8">
        <title>Issue App</title>   
        <link rel="stylesheet" type="text/css" href="wageup.css">
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            
            <!-- the title and desc -->
            <h1 class="display-4 text-center">WageApp</h1>
            <p class="h6 text-center" id="paragraphTitle">This is a simple App for calculating wage by year, month, day and hour</p>
            <hr class="my-4">
            
            <!-- input-form   -->
            <form>
                <div class="form-group">
                    <label for="annualInput">Your annual wage</label>
                        <input id="annualInput" type="annualData" class="form-control" aria-describedby="hep" placeholder="Annual wage in $">
                    <small id="help" class="form-text text-muted">We'll never share your wage with anyone else.</small>
                </div>
            
            <!-- choose developers -->
                <div class="form-group">
                    <label for="categoryDevelopers">Your category of developers</label>
                        <input id="dev" type="categoryDevelopers" class="form-control" aria-describedby="hep" placeholder="Your developer">
                    <small class="form-text text-muted">Choose: junior developer, mid developer, senior developer</small>
                </div>
               
                <button onclick="wage()" type="button" class="btn btn-primary btn-sm" id="annualInput">Check</button>
                            
            </form>
            
        </div>
        <div class="alert alert-success" role="alert" id="resultMonthly">
        </div>
        <div class="alert alert-info" role="alert" id="resultDaily">
        </div>
        <div class="alert alert-warning" role="alert" id="resultHourly">
        </div>
        <div class="alert alert-danger" role="alert" id="devOutput">
        </div>
    </div>
     </div>
    
    
    <!-- JS -->
    <script type="text/javascript" src="wageUp.js"></script>
    <!-- Jquery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!-- Bootstrap -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</body>

</html>

【问题讨论】：

标签： javascript string numbers parseint typeof

【解决方案1】：

尝试使用

let numberValue = +getValue || getValue;

而不是

let numberValue = parseInt(getValue);

【讨论】：

这是最简单的答案！你是怎么想出这个解决方案的？你能描述一下+getValue || getValue;的工作原理吗？
@Adam 它是+getValue 中使用的一元加号，所以它会得到字符串的数值，这里使用它就像+value ? +value : value。它还会为非数字形式的字符串提供NaN，它与Number()具有相同的效果。
嗯，你还有其他的 + 例子可以用吗？这个解决方案也很好很简单：if (!isNaN(getValue)) { document.getElementById("devOutput").innerHTML = getValue;Number(getValue);

【解决方案2】：

您可以使用 Number() constructor 代替 parseInt() 来解析您的号码。

let numberValue = Number(getValue) || getValue;

它只会为数字字符串提供一个数字，并为其他字符串返回NaN。

演示：

console.log(Number("20"));
console.log(Number("car"));

【讨论】：

我把let numberValue = parseInt(getValue);改成let numberValue = Number(getValue);还是一样的错误结果
@Adam 应该写成(Number(getValue) ? Number(getValue) : getValue;，或者更好的是let numberValue = Number(getValue) || getValue;，我刚刚提到了你应该如何得到它。
我现在明白了 :) 谢谢

【解决方案3】：

所以，如果它是一个数字，你只想转换为一个 int？如果是这样，请使用正则表达式：

var value = /^\d+$/.test(getValue) ? parseInt(getValue, 10) : getValue;

如果getValue == '123123'，它将被转换为一个int。

如果getValue == '23234x' 它将保持为字符串。

【讨论】：

let numberValue = +getValue || getValue; 不是更简单吗？由@Bsalex 撰写
更简单？我不确定，对我来说看起来像巫毒;)
它是 +getValue 中使用的一元加号，所以它会得到字符串的数值，它在这里像 +value 一样使用吗？ +价值：价值。它还将为不是数字形式的字符串提供 NaN，它与 @Bsalex 编写的 Number() 具有相同的效果
需要多次解释的事实可能意味着它并不那么简单。开发人员需要停下来弄清楚
你知道，它看起来很简单，但并不意味着简单易懂。

【解决方案4】：

一种选择是使用正则表达式。

你可以替换这一行：

let numberValue = parseInt(getValue);

用这一行：

let numberValue = /^\d+$/.test(getValue) ? parseInt(getValue, 10) : getValue;

您可以使用parseInt 和 10 作为基数参数。

【讨论】：

我一直在寻找像@Bsalex 写的更简单的解决方案。无论如何感谢您的高级回答:)