Javascript parseInt 无法处理字符串，试图从 HTML 值中获取整数

Question

我正在制作一个基本游戏，并且我有一个正在使用的图 block 系统。每个图 block 都有一个 ID“tileX”，其中 X 是一个数字(例如 tile1)。我有一个功能如下:

window.onclick = function() {
    var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y).id;
    document.getElementById("tileTell").value = elementMouseIsOver;
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
    elementMouseIsOver = parseInt(elementMouseIsOver);
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
}

代码的第 4 行填充了一个输入字段，这样我就可以直观地看到我单击了哪个图 block (我使用它来确保一切正常，这样我就可以找到我需要的图 block )。那很好用。在第 5 行，当我执行 console.log 时，它为我提供了正确的 ID，并验证它是一个 string。

之后我想将 elementMouseIsOver 变量重置为整数，因此如果 ID 是 tile1 我希望新结果是 1。但是当我在控制台中查看它时，我得到了 NaN。然后当我在那之后立即检查它的类型时，我得到了 number。

parseInt 似乎没有正常工作，我做错了什么？我需要使用每个图 block 的 ID 名称进行数学运算，因此这对我的游戏至关重要。我知道这可能是一个非常愚蠢的错误，但我完全不知所措......

Answer 1

如果您希望 parseInt() 以您正在使用的方式处理字符串，它必须以数字开头；在您的例子中，它以字母字符开头，因此(隐式基数为 10)它将正确地返回 NaN。

您可以使用通用方法获取数字:

var num = +(elementMouseIsOver.match(/\d+/) || [])[0];

它匹配它可以找到的第一组数字，然后使用一元加号运算符将其转换为实际数值。如果字符串不包含任何数字，它将产生 NaN。

在您的特定情况下，您还可以在紧跟在 "tile" 之后的部分应用 parseInt():

var num = +elementMouseIsOver.substr(4);