JavaScript හි URLSearchParams සමඟ වැඩ කිරීම

ඔබ දැනටමත් දන්නා පරිදි, ආකෘති සහ GET ඉල්ලීම් සමඟ වැඩ කිරීමේදී JavaScript හි පහත ආකාරයේ අකුරු තන්තු දිස්වේ:

javascriptlet paramsString = 'a=1&b=2&c=3';

සමහර විට මෙම තන්තුවෙන් යම් පරාමිතියක අගය ක්‍රමලේඛන ලෙස වෙනස් කිරීමට අවශ්‍ය වේ. මෙය සිදු කරන කේතය ලිවීම ඉතා පහසු නැත. එබැවින් JavaScript හි මෙවැනි තන්තු සමඟ වැඩ කිරීම සඳහා විශේෂ පන්තියක් URLSearchParams අන්තර්ගත කර ඇත.

අපි මෙම පන්තියේ වස්තුවක් නිර්මාණය කරමු, අපගේ පරාමිති සහිත තන්තුව පරාමිතියක් ලෙස සපයමින්:

javascriptlet paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

අපි නිර්මාණය කරන ලද වස්තුවට ඇති ක්‍රම බලමු.

පරාමිති අගය ලබා ගැනීම

get ක්‍රමය භාවිතයෙන් පරාමිතියක අගය ලබා ගත හැක:

javascriptlet res = searchParams.get('a');
console.log(res);

නොපවතින පරාමිතියක අගය ලබා ගැනීමට උත්සාහ කරමු:

javascriptlet res = searchParams.get('x');
console.log(res); // null ප්‍රතිදානය කරයි

පරාමිතියක පැවැත්ම පරීක්ෂා කිරීම

has ක්‍රමය භාවිතයෙන් පරාමිතියක පැවැත්ම පරීක්ෂා කළ හැක. පවතින පරාමිතියක් පරීක්ෂා කරමු:

javascriptlet res = searchParams.has('a');
console.log(res); // true ප්‍රතිදානය කරයි

නොපවතින පරාමිතියක් පරීක්ෂා කරමු:

javascriptlet res = searchParams.has('x');
console.log(res); // false ප්‍රතිදානය කරයි

තන්තුවකට පරිවර්තනය කිරීම

toString ක්‍රමය භාවිතයෙන් අපගේ වස්තුව නැවත තන්තුවකට පරිවර්තනය කළ හැක:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3' ප්‍රතිදානය කරයි

පරාමිති වෙනස් කිරීම

set ක්‍රමය භාවිතයෙන් පරාමිතියක අගය වෙනස් කළ හැක:

javascriptsearchParams.set('b', 'x');

වෙනස්කම් පරීක්ෂා කරමු:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&b=x&c=3' ප්‍රතිදානය කරයි

පරාමිති එකතු කිරීම

set ක්‍රමය භාවිතයෙන් නව පරාමිතියක් ද එකතු කළ හැක:

javascriptsearchParams.set('d', '4');

වෙනස්කම් පරීක්ෂා කරමු:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' ප්‍රතිදානය කරයි

පරාමිති එකතු කිරීම

append ක්‍රමය භාවිතයෙන් ද නව පරාමිතියක් එකතු කළ හැක:

javascriptsearchParams.append('d', '4');

වෙනස්කම් පරීක්ෂා කරමු:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' ප්‍රතිදානය කරයි

දැනටමත් පවතින පරාමිතියක් එකතු කිරීමට උත්සාහ කරමු:

javascriptsearchParams.append('a', '4');

මෙම අවස්ථාවේදී අපගේ ක්‍රමය සරලව එකම නමින් යුත් පරාමිතියක් අවසානයට එකතු කරයි:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&a=4' ප්‍රතිදානය කරයි

මෙහිදී set සහ append ක්‍රම අතර වෙනස පෙන්නුම් කරයි. පළමුවැන්න පවතින පරාමිතිය වෙනස් කරන අතර, දෙවැන්න එහි නැවත නැවත අවසානයට එකතු කරයි.

පරාමිති මකා දැමීම

delete ක්‍රමය භාවිතයෙන් පරාමිති මකා දැමිය හැක:

javascriptsearchParams.delete('b');

වෙනස්කම් පරීක්ෂා කරමු:

javascriptlet res = searchParams.toString();
console.log(res); // 'a=1&c=3' ප්‍රතිදානය කරයි

චක්‍රයක් භාවිතයෙන් පරාමිති හරහා පුනරාවර්තනය කිරීම

පරාමිති චක්‍රයක් භාවිතයෙන් පුනරාවර්තනය කළ හැක:

javascriptfor (let p of searchParams) {
  console.log(p);
}

එකම පරාමිති කිහිපයක්

අපගේ තන්තුවේ එකම පරාමිති කිහිපයක් පවතිනවා යැයි සිතමු:

javascriptlet paramsString = 'a=1&a=2&b=2&c=3';

getAll ක්‍රමය භාවිතයෙන් මෙම පරාමිතිවල අගයන්ගේ අරාව ලබා ගත හැක:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // [1, 2] ප්‍රතිදානය කරයි

ප්‍රායෝගික කාර්යයන්

පහත පරාමිති සහිත තන්තුව ලබා දී ඇතැයි සිතමු:

javascriptlet paramsString = 'test1=param1&test2=param2&test3=param3';