这个字符串拆分器可以重构或改进吗

Could this string splitter be refactored or improved?

本文关键字：重构 字符串 拆分      更新时间：2023-09-26

以下代码片段执行以下操作：

给定一个类似："key1=value1;key2=value2;key3=value3"的字符串，它将执行key1的查找，并使用jQuery:将值设置为value1

$("#key1").val("value1");

我的目标是不假设字符串的格式正确，因此它可能没有;，也可能没有=。因此，代码应该保护自己不崩溃。

如何使用正确的javascript样式/习语来改进这一点：

var myString = "key1=value1&key2=value2;key3=value3";
var kvp = myString.split(";");
if (kvp && kvp.length) {
    for (var x = 0; x < kvp.length; x++) {
        var parts = kvp[x];
        if (parts && parts.length && parts.indexOf("=") >= 0) {
           var kv = parts.split("=");
           $("#" + kv[0]).val(kv[1]);
        }
    }
}

我会把它分成一个函数，解析字符串，另一个函数进行DOM操作。类似于：

function parseString (str, sep, eq) {
  sep = sep || ';';
  eq = eq || '=';
  var result = {};
  if(!str)
    return result;
  var pairs = str.split(sep);
  for (var i = 0, len = pairs.length; i < len; i++) {
    var pair = pairs[i].split(eq);
    // Disregard if we don't have a key
    if(!pair[0].length)
      continue;
    result[pair[0]] = pair[1];
  }
  return result;
}
function setValues(params) {
  for(id in params)
    $('#' + id).value(params[id]);
}
// Add values for ids as specified in myString
var myString = "key1=value1;key2=value2;key3=value3";
setValues(parseString(myString));

更新：

如果您知道代码将在现代JS引擎上运行，那么可以使用Array.prototype.map和Array.prototype.reduce来获得更简洁的代码。这将仅适用于符合ES5的引擎（即，不适用于IE<9）。

function parseString (str, sep, eq) {
  sep = sep || ';';
  eq = eq || '=';
  if(!str)
    return {};
  function splitPair (pair) { return pair.split(eq) }
  function addResult (result, pair) {
    if(pair[0].length)
      result[pair[0]] = pair[1];
    return result;
  }
  return str.split(sep)
    .map(splitPair)
    .reduce(addResult, {});
}

使用parseString:的示例

console.log(parseString('key1=value1;key2=value2;key3=value3'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }
console.log(parseString('=value1;key2=value2;key3=value3'));
{ key2: 'value2', key3: 'value3' }
console.log(parseString(';key1=value1;key2=value2;key3=value3'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }
console.log(parseString('key1=value1;key2=value2;key3=value3;'));
{ key1: 'value1', key2: 'value2', key3: 'value3' }
console.log(parseString('key1=value1'));
{ key1: 'value1' }
console.log(parseString('key1='));
{ key1: '' }
console.log(parseString('key1'));
{ key1: undefined }
console.log(parseString(''));
{}
console.log(parseString());
{}
相关文章：