Javascript串接字串時注意

2021-07-31

Javascript串接字串時要注意

最近維護一個系統時遇到，該系統用自己的前端套件，也沒有套jQuery
但套件所提供的功能有限，遇到一些狀況常常需要自己寫土炮Js
像是套件沒有提供匯出報表的功能，套件所渲染的html結構也不能直接serialize成後端所要的參數
前人們往往都是自己組query string或是form element來發送請求

// 範例:
// 已有查詢條件js物件
let queryParam = {
    a: 'aaa',
    b: 'xxx'
};

// 組的queryString
let queryString = Object.entries(queryParam).map(([key, value]) => `${key}=${value}`).join("&");
window.open('xxx url' + '?' + queryString);


// 或是組的form
const form = document.createElement('form');
form.method = "post";
form.action = "xxx url";
for (const key in queryParam) {
    const hiddenField = document.createElement('input');
    form.insertAdjacentHTML('beforeend', `<input name="${key}" value="${queryParam[key]}" />`);
}
form.submit();

這樣的狀況在遇到變數是null、undefined、NaN時會直接被當成字串處理
例如以下這個參數

let queryParam = {
    a: 'aaa',
    b: 'xxx',
    c: null,
    d: undefined
};
console.log(Object.entries(queryParam).map(([key, value]) => `${key}=${value}`).join("&"));

這個方法組的queryString變成了"a=aaa&b=xxx&c=null&d=undefined"
這個方法組的form也會有相同問題，如果之後遇到了類似的情境應該多注意
怪不得後端時不時看到 replace("null", "") 、replace("undefined", "") 之類的奇怪code......

土炮組form法參考這個 https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit 之後沒有null了
但如果遇到undefined還是被當成字串填入
最後還是用該套件提供的方法先處理一次js物件，把符合特定規則的屬性值通通換成空字串處理

回首頁