Hasilkan URL dengan parameter pada lutut dan praktik terbaik

Suatu kali, saya melihat kode dalam proyek tim tetangga yang menghasilkan string dengan parameter URL untuk penyisipan berikutnya ke dalam iframeatribut src.

Artikel ini mungkin tampak berlebihan, jelas atau terlalu sederhana, tetapi karena ini ditemukan pada satwa liar, Anda tidak boleh diam tentang hal ini, tetapi berbagi praktik terbaik.

Jadi ini dia, kode aslinya:

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

Untuk referensi, param1dan param2dalam kode asli memiliki nama berbicara. Dan nilainya dapat berupa string apa pun dengan banyak karakter yang tidak valid untuk karakter URL

Masalah apa yang dimiliki kode ini?

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

Jika kodenya tampak verbose, membingungkan, maka mungkin ada cara sederhana untuk memperbaikinya.
Dan ada juga kemungkinan bahwa fungsionalitas yang Anda butuhkan diimplementasikan di tingkat Web API.