JavaScript中>=运算符对三位数数值比较返回错误false问题求助

问题根源 #

你当前的代码是在做字符串比较，而非数值比较。$('#x').text()和输入框的.value返回的都是字符串类型，JavaScript中字符串比较是按字符的Unicode编码逐位对比的：

• 当比较"64"和"3"时，第一个字符"6"的编码（54）大于"3"的编码（51），所以返回true；
• 当比较"164"和"3"时，第一个字符"1"的编码（49）小于"3"的编码（51），直接返回false，不会继续对比后面的字符。

解决方法 #

将参与比较的两个值都转换为数值类型后再进行比较，以下是几种常用的转换方式：

1. 使用Number()函数转换（通用数值类型）

var LC = Number($('#a').text()) >= Number(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value),
    ES = Number($('#b').text()) >= Number(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value),
    VK = Number($('#c').text()) >= Number(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value),
    SPY = Number($('#d').text()) >= Number(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value),
    CL = Number($('#e').text()) >= Number(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value);

2. 使用parseInt()转换（仅适用于整数场景）

如果确定比较的都是整数，推荐添加基数10避免进制歧义：

var LC = parseInt($('#a').text(), 10) >= parseInt(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value, 10),
    ES = parseInt($('#b').text(), 10) >= parseInt(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value, 10),
    VK = parseInt($('#c').text(), 10) >= parseInt(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value, 10),
    SPY = parseInt($('#d').text(), 10) >= parseInt(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value, 10),
    CL = parseInt($('#e').text(), 10) >= parseInt(document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value, 10);

3. 使用一元加号+快速转换（简洁写法）

这是JavaScript中转换数值的快捷方式：

var LC = +$('#a').text() >= +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value,
    ES = +$('#b').text() >= +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value,
    VK = +$('#c').text() >= +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value,
    SPY = +$('#d').text() >= +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value,
    CL = +$('#e').text() >= +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value;

注意事项 #

如果文本或输入框中存在非数字内容，转换后会得到NaN，此时比较结果会是false。如果需要处理这种情况，可以先用isNaN()做校验，例如：

var clText = +$('#e').text();
var clInput = +document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value;
var CL = !isNaN(clText) && !isNaN(clInput) && clText >= clInput;

内容的提问来源于stack exchange，提问作者Bruno Ribeiro