JavaScript字符串转对象：非数值字段返回NaN的问题

嘿，我一眼就看到问题出在哪啦！你代码里用了var value = singleArr[1]-0;，这个操作会把所有值都往数值类型转——但像#dfdfdf、solid这种非数字字符串，转数值肯定会得到NaN呀！

下面给你几种修复方案，按需选就行：

方案1：简单区分数值与字符串 #

修改value的赋值逻辑，先尝试转数字，转失败就保留原字符串：

var str = "margin_top=5&margin_bottom=5&border_color=#dfdfdf&border_style=solid";
console.log(strToObj(str)); // 用console.log比alert调试更方便哦

function strToObj(str){
 str = str.replace(/\(|\)/g,'');
 var arr = str.split('&');
 var obj = {};
 for (var i = 0; i < arr.length; i++) {
  var singleArr = arr[i].trim().split('=');
  var name = singleArr[0];
  // 核心：转数值失败就用原字符串
  var value = isNaN(singleArr[1] - 0) ? singleArr[1] : singleArr[1] - 0;
  if (obj[name] === undefined) {
   obj[name] = value;
  }
  console.log(`${name}: ${value}`);
 }
 return obj;
}

方案2：更严谨的数值判断（推荐） #

isNaN偶尔会有小坑（比如空字符串转数值是0，可能不符合预期），用isFinite判断更靠谱：

function strToObj(str){
 str = str.replace(/\(|\)/g,'');
 var arr = str.split('&');
 var obj = {};
 for (var i = 0; i < arr.length; i++) {
  var singleArr = arr[i].trim().split('=');
  var name = singleArr[0];
  var numValue = Number(singleArr[1]);
  // 只有是有效有限数字时才转数值，否则用原字符串
  var value = isFinite(numValue) ? numValue : singleArr[1];
  if (obj[name] === undefined) {
   obj[name] = value;
  }
  console.log(`${name}: ${value}`);
 }
 return obj;
}

方案3：用现代JS API偷懒（最简洁） #

如果你的项目支持ES6+，直接用浏览器原生的URLSearchParams，它能帮你省掉很多手动拆分的代码：

var str = "margin_top=5&margin_bottom=5&border_color=#dfdfdf&border_style=solid";
function strToObj(str) {
  const params = new URLSearchParams(str);
  const obj = {};
  for (const [key, value] of params) {
    const numValue = Number(value);
    obj[key] = isFinite(numValue) ? numValue : value;
    console.log(`${key}: ${obj[key]}`);
  }
  return obj;
}
console.log(strToObj(str));

这样改完之后，数值类型的参数会保留数字格式，字符串类型的参数也能正常显示，不会再出现NaN的问题啦！

内容的提问来源于stack exchange，提问作者Mustapha Fersaoui