Generieren Sie URLs mit Parametern auf dem Knie und Best Practice

Einmal habe ich Code in einem Projekt eines benachbarten Teams gesehen, das eine Zeichenfolge mit URL-Parametern zum anschließenden Einfügen in ein iframesrc-Attribut generiert hat .

Dieser Artikel mag überflüssig, offensichtlich oder zu einfach erscheinen, aber da dies in Wildtieren vorkommt, sollten Sie darüber nicht schweigen, sondern Best Practices austauschen.

Hier ist also der Originalcode:

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

Als Referenz param1und param2im Originalcode haben sprechende Namen. Und ihre Werte können beliebige Zeichenfolgen mit vielen ungültigen Zeichen für URL-Zeichen sein

Welche Probleme hat dieser Code?

• -, 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 .

Wenn der Code ausführlich und verwirrend erscheint, gibt es wahrscheinlich einfache Möglichkeiten, ihn zu verbessern.
Außerdem besteht die Möglichkeit, dass die von Ihnen benötigten Funktionen auf Web-API-Ebene implementiert werden.