在前端开发中，我们经常会遇到需要将字符串转换成数字的需求。通常情况下，我们可以使用parseInt、parseFloat等函数来实现。但是，有些情况下，这些函数的行为可能并不如我们所期望。
比如说，当我们尝试将一个包含一个数组的字符串解析为数字时，会发现这个数组似乎被忽略了，例如：
const num = parseInt("[ 1234 ]");
console.log(num); // 输出值为：NaN这个结果可能会让人感到困惑，因为我们本来期望的是将字符串"[ 1234 ]"解析成数字1234。那么这个问题究竟出在哪里呢？
认识parseInt
在深入探究这个问题之前，我们需要先了解一下parseInt函数的原理。parseInt函数用于将字符串转换成整数，其基本语法为：
parseInt(string, radix)
其中，string是要转换的字符串，radix表示进制数，即指定字符串中数字的进制方式。如果未指定radix，则默认为十进制。
举例来说，如果我们要将字符串"100"转换成二进制数，可以这样写：
const binaryNum = parseInt("100", 2);
console.log(binaryNum); // 输出值为：4在这个例子中，由于我们指定了radix为2，因此parseInt函数会将字符串"100"按照二进制数解析成10进制数4。
解析含有数组的字符串
回到我们之前的问题，即为什么解析"[ 1234 ]"返回NaN。原因是，parseInt函数只能解析包含数字的字符串，而对于其他类型的字符，它会将其忽略掉。在这个例子中，由于字符串中包含一个空格和一对方括号，因此parseInt函数并不知道该如何处理它们，因此返回了NaN。
那么，我们该如何才能正确地解析这个带有数组的字符串呢？一个简单的方法是使用eval函数。eval函数可以将一个字符串作为JavaScript代码执行，并返回最后一个表达式的值。例如：
const num = eval("[ 1234 ]");
console.log(num); // 输出值为：[1234]在这个例子中，eval函数解析了字符串"[ 1234 ]"并将其转换成了一个数组对象[1234]，得到了我们所期望的结果。
但是需要注意的是，由于eval函数的执行结果完全取决于输入的字符串内容，因此如果输入的字符串来自用户或者其他不可信的来源，就可能存在安全风险。因此，在实际开发中，我们应该尽量避免使用eval函数。
另一个更加安全的方法是使用JSON.parse函数。JSON.parse函数可以将符合JSON格式的字符串解析成对应的JavaScript对象。例如：
const num = JSON.parse("[ 1234 ]");
console.log(num); // 输出值为：[1234]在这个例子中，JSON.parse函数将字符串"[ 1234 ]"解析成了一个数组对象[1234]，得到了我们所期望的结果。由于JSON是一种通用的数据交换格式，并且其语法非常严格，因此使用JSON.parse函数不太可能出现安全风险。
总结
在本文中，我们探讨了为什么解析"[ 1234 ]"会返回NaN的原因，并介绍了eval函数和JSON.parse函数两种方法来解决这个问题。需要注意的是，eval函数虽然可以解决这个问题，但由于存在安全风险，因此在实际开发中应该尽量避免使用。相
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11927