生成带有膝盖参数和最佳实践的URL

一次，我在一个相邻团队的项目中看到了代码，该代码生成了带有URL参数的字符串，随后将其插入iframesrc属性。

这篇文章看似多余，明显或过于简单，但由于它是在野生动物中发现的，因此您不应对此保持沉默，而应分享最佳实践。

原始代码如下：

const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const encodedTimestamp = encodeURIComponent(timestamp);
  const delimiter = '&';
  const queryString = `${param1}${delimiter}
        param2=${param2}${delimiter}
        objectId=${objectId}${delimiter}
        itemTimestamp=${encodedTimestamp}${delimiter}
        itemName=${name}`;
  return queryString.replace(/ /g, '%20');
};

作为参考，param1并且param2在原来的代码有说名字。并且它们的值可以是任何字符串，其中包含很多无效的URL字符

此代码有什么问题？

• 首先，这是encodeURIComponent每个值都不存在的原因，每个值都可能包含绝对的任何字符。（在此任务的上下文中，这些名称由用户设置，并且可以包含各种字符，例如与号，空格或变音符）；
• 其次，由于模板字符串运算符，这些是多余的空格和换行符`；他们的代码作者正在尝试使用方法进行修复.replace()，但是这种方法无法解决任何问题；
• 第三，由于所选择的语法容易出错，因此难以阅读且代码不可扩展。

如何解决？

第一种方法：

const delimiter = '&'; //      
const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const queryString = [
    `param1=${encodeURIComponent(param1)}`,
    `param2=${encodeURIComponent(param2)}`,
    `objectId=${encodeURIComponent(objectId)}`,
    `itemTimestamp=${encodeURIComponent(timestamp)}`,
    `itemName=${encodeURIComponent(name)}`
  ].join(delimeter);
  return queryString;
};

? . , encodeURIComponent. , . .

? ! :

const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const queryParams = {
     param1,
     param2,
     objectId,
     itemTimestamp: timestamp,
     itemName: name
  };
  const encodeAndJoinPair = pair => pair.map(encodeURIComponent).join('=');
  return Object.entries(queryParams).map(encodeAndJoinPair).join('&');
};

. , — .

, . , .

. , ? , queryParams. . , . , :

const encodeAndJoinPair = pair => pair
  .map(encodeURIComponent)
  .join('=');

const createQueryString = objectParams => Object
  .entries(objectParams)
  .map(encodeAndJoinPair)
  .join('&');
};

utils.js .

URLSearchParams

Web API. URLSearchParams .

:

const createQueryString = objectParams => new URLSearchParams(objectParams).toString();

Internet Explorer, , , https://www.npmjs.com/package/url-search-params-polyfill .

如果代码显得冗长，令人困惑，则可能有简单的方法可以对其进行改进。
而且还可能在Web API级别实现所需的功能。