घुटने और सबसे अच्छे अभ्यास पर मापदंडों के साथ URL उत्पन्न करें

एक बार, मैंने एक पड़ोसी टीम की एक परियोजना में कोड को देखा, जिसने एक iframesrc विशेषता में बाद के सम्मिलन के लिए URL मापदंडों के साथ एक स्ट्रिंग उत्पन्न की ।

यह लेख सतही, स्पष्ट या बहुत सरल लग सकता है, लेकिन चूंकि यह वन्यजीवों में पाया जाता है, इसलिए आपको इस बारे में चुप नहीं होना चाहिए, बल्कि सर्वोत्तम प्रथाओं को साझा करना चाहिए।

तो यहाँ यह है, मूल कोड:

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 , . ( , );
• -, , - 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 .

यदि कोड क्रिया, भ्रामक लगता है, तो संभवतः इसे सुधारने के सरल तरीके हैं।
और यह भी संभावना है कि आपको जिस कार्यक्षमता की आवश्यकता है वह वेब एपीआई स्तर पर लागू हो।