JS實現JSON物件與URL引數的相互轉換

十方發表於2022-06-17
JSON物件

在實際的開發過程中，可能會遇到需要將 JSON物件轉換為URL引數，或者將URL引數轉換為JSON物件的場景，比如有一個JSON物件如下：

{
    "type": 1,
    "keyword": "js"
}

需要轉換成URL引數：type=1&keyword=js

1、JSON物件轉換為URL引數

JSON物件轉換為URL引數，主要有兩種實現方式，一種是遍歷JSON物件屬性，另一種是使用 URLSearchParams ，下面分別結合程式碼介紹一下。

（1）遍歷JSON物件屬性

使用迴圈的方式遍歷JSON物件的屬性，然後將其拼接起來，這可能是最容易想到的一種方式，下面給出一種遍歷JSON物件屬性的實現方式：

function jsonToUrlParam(json) {
    return Object.keys(json).map(key => key + '=' + json[key]).join('&');
}

測試一下

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json));

輸出的結果如下：

type=1&keyword=js

在實際的應用場景中，一個JSON物件可能有很多屬性，但是URL引數只需要部分屬性，這個時候可以改造一下上面的方法，從而實現忽略指定的屬性即可，如下：

function jsonToUrlParam(json, ignoreFields) {
    return Object.keys(json)
        .filter(key => ignoreFields.indexOf(key) === -1)
        .map(key => key + '=' + json[key]).join('&');
}

測試一下忽略 type 屬性

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json, ['type']));

輸出的結果如下：

keyword=js

（2）URLSearchParams

關於 URLSearchParams，可以先來看看官方https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams的定義

URLSearchParams 介面定義了一些實用的方法來處理 URL 的查詢字串。

簡單來說，它就是用來處理URL上的引數字串的，即 ? 後面部分 A=B&C=D&E=F 的內容，開頭的'?' 字元會被忽略，來看看它是如何使用的：

function jsonToUrlParam(json) {
    return new URLSearchParams(json).toString();
}

測試一下

let json = {
    "type": 1,
    "keyword": "js"
};
console.log(jsonToUrlParam(json));

輸出的結果如下：

type=1&keyword=js

2、URL引數轉換為JSON物件

比如有這樣的一個 URL ：http://example.com?type=1&key...，它的引數部分為 type=1&keyword=js，如何將其轉換為一個JSON物件呢？具體實現程式碼如下：

function urlParamToJson(urlParam) {
    let json = {};
    urlParam.trim()
        .split('&')
        .forEach(item => json[item.split('=')[0]] = item.split('=')[1]);

    return json;
}

測試一下

console.log(JSON.stringify(urlParamToJson('type=1&keyword=js')))

輸出結果如下：

{"type":"1","keyword":"js"}

對於這個方法，也可以對其進行改造一下，直接傳入一個url，然後在方法裡面提取引數部分，最後再進行轉換，程式碼如下：

function urlParamToJson(url) {
    if (!url) {
        return {};
    }

    let json = {};
    url.substring(url.indexOf('?') + 1)
        .trim()
        .split('&')
        .forEach(item => json[item.split('=')[0]] = item.split('=')[1]);

    return json;
}

傳入一個url進行測試

console.log(JSON.stringify(urlParamToJson('http://example.com?type=1&keyword=js')))

輸出結果如下：

{"type":"1","keyword":"js"}

相關文章