Générer des URL avec des paramètres sur le genou et les meilleures pratiques

Une fois, j'ai vu du code dans un projet d'une équipe voisine qui a généré une chaîne avec des paramètres URL pour une insertion ultérieure dans un iframeattribut src.

Cet article peut sembler superflu, évident ou trop simple, mais comme cela se trouve dans la faune, vous ne devriez pas rester silencieux à ce sujet, mais plutôt partager les meilleures pratiques.

Le voici donc, le code d'origine:

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

Pour référence, param1et param2dans le code d'origine ont des noms parlants. Et leurs valeurs peuvent être des chaînes avec beaucoup de caractères non valides pour les caractères URL

Quels problèmes ce code a-t-il?

• -, 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 le code semble verbeux, déroutant, il existe probablement des moyens simples de l'améliorer.
Et il y a aussi la possibilité que la fonctionnalité dont vous avez besoin soit implémentée au niveau de l'API Web.