[JS] 쿼리스트링을 가져와서 JSON 으로 바꾸기

안녕하세요 크로네입니다.

 

오늘은 자바스크립트에서 쿼리스트링을 가져와서 JSON 으로 바꿔보겠습니다.

 

1. 쿼리스트링을 가져오기

자바스크립트에서 쿼리스트링은 location.search 에 있습니다.

console.log(location.search); // 예시: ?abc=123&def=456

location.search 는 앞에 '?' 가 오고 뒤에 글자가 나오는데요

이 글자를 더 잘 활용하려면 이 값을 JSON 으로 바꿀 필요가 있습니다.

2. JSON 으로 바꾸기

일단 JSON 으로 바꾸려면 먼저 앞에있는 '?' 를 지울 필요가 있습니다.

splice() 함수를 이용해 앞의 한글자를 잘라보겠습니다.

console.log(location.search.splice(1)); // abc=123&def=456

그럼 여기에서 각각의 데이터를 나눠주어야겠죠?

'&' 를 기준으로 split 하면, ["abc=123", "def=456"] 으로 나눠질겁니다.

console.log(location.search.splice(1).split("&")); // ["abc=123", "def=456"]

그런데 여기서 부터가 문제입니다.

어떻게 하면 Array 를 Object로 바꿀 수 있을까요?

아래의 코드를 쓰면 됩니다.

var querystring = location.search.splice(1).split("&");
var query = {};
for(var i = 0; i < querystring.length; i++) {
    query[querystring[i].split("=")[0]] = querystring[i].split("=")[1];
}
console.log(query); // {"abc": "123", "def": "456"}

위에서는 querystring이라는 변수를 만들고

query 라는 변수에 빈 JSON 을 만듭니다.

그 다음 for문을 querystring.length 번 돌면서

query에 querystring[i].split("=")[0] 를 querystring[i].split("=")[1] 로 설정합니다.

참고로 여기에서 querystring[i].split("=") 은 ["abc", "123"](예시) 입니다.

이렇게 하면 쿼리스트링을 잘 변환했습니다.

 

그런데... 여기에서 123 을 숫자 123 으로 할 수는 없을까요?

글자 123 을 숫자로 변환할 수 있을 때 자동으로

숫자로 변환하게 할 수는 없을까요?

 

이것도 가능합니다!

3. 값이 숫자라면

일단 위 코드를 봅시다.

var querystring = location.search.splice(1).split("&");
var query = {};
for(var i = 0; i < querystring.length; i++) {
    query[querystring[i].split("=")[0]] = querystring[i].split("=")[1];
}
console.log(query); // {"abc": "123", "def": "456"}

이곳에서는 값을 바로 설정했습니다.

하지만 이곳에 약간의 조건을 넣으면 될겁니다.

그런데 어떻게 글자 123이 숫자 123인걸 확인할까요?

바로 곱하기를 이용하면 됩니다.

 

글자에 곱하기 1을 해보겠습니다.

console.log("abc" * 1); // NaN

NaN 이 나왔습니다.

그런데 만약 변환이 가능하다면요?

console.log("123" * 1); // (숫자) 123

숫자가 변환되어 나왔습니다.

그렇다면 곱한값이 NaN 일때에는 그대로,

곱한값의 type 이 number 인경우 1을 곱한 값으로 저장하면 되겠죠.

var querystring = location.search.splice(1).split("&");
var query = {};
for(var i = 0; i < querystring.length; i++) {
    if(querystring[i].split("=")[1] * 1 == NaN) {
        query[querystring[i].split("=")[0]] = querystring[i].split("=")[1];
    } else {
        query[querystring[i].split("=")[0]] = querystring[i].split("=")[1] * 1;
    }
}
console.log(query); // {"abc": 123, "def": 456}

이렇게 하면 값이 숫자로 변환할 수 있는경우 변환을 한 값을 출력하게 됩니다.

 

지금까지 자바스크립트에서 쿼리스트링을 가져와서 JSON 으로 바꾸기 였는데요,

마음에 드셨다면 공감 한번씩 눌러주시면 감사하겠습니다.

 

이상 크로네였습니다.