Genere URL con parámetros en la rodilla y mejores prácticas

Una vez, vi código en un proyecto de un equipo vecino que generó una cadena con parámetros de URL para su posterior inserción en el iframeatributo src.

Este artículo puede parecer superfluo, obvio o demasiado simple, pero como se encuentra en la vida silvestre, no debe guardar silencio al respecto, sino más bien, compartir las mejores prácticas.

Así que aquí está, el código original:

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');
};

Como referencia, param1y param2en el código original tienen nombres que hablan. Y sus valores pueden ser cualquier cadena con muchos caracteres no válidos para caracteres URL

¿Qué problemas tiene este código?

• -, encodeURIComponent , . ( , );
• -, , - template string `; .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 .

Si el código parece detallado, confuso, entonces probablemente haya formas simples de mejorarlo.
Y también existe la posibilidad de que la funcionalidad que necesita se implemente a nivel de API web.