JavaScriptでパラメータの値を取得する方法を一行ずつ解説

JavaScriptでパラメータを取得する方法

まず完成系はこちらです。一つずつ解説していきます。

let paramList = {}
let paramSplit = {}
const originParam = location.search
    .substring(1)
    .split('&')
    
for(let i = 0;originParam[i];i++) {
    paramSplit = originParam[i].split('=')
    paramList[paramSplit[0]] = paramSplit[1]
}

1. paramList

パラメータを入れておくリストです

2. paramSplit

パラメータとその値を一時的に分けておくリストです

3. location.search

パラメータを丸ごと取得します

URL : https://hogehogefoo.com?userid=0001234&fooName=foo
location.search // ?userid=0001234&fooName=foo

searchだけでなくlocationオブジェクトはパスを取得する pathname、動的に画面遷移を行う href など様々な種類があります。

4. .substring(1).split('&')



1文字目以降(?)を&ごとに区切ってリストに挿入します。

location.search // ?userid=0001234&fooName=foo
.substring(1).split('&') // userid=0001234,fooName=foo

5. originParam[i].split('=')



一つのパラメータを=で区切って、paramSplitに代入します

// userid=0001234
paramSplit[0] //userid
paramSplit[1] //0001234

6. paramList[paramSplit[0]] = paramSplit[1]



パラメータと値をリストに紐付けることができます。

paramList.userid //0001234

値にアクセスすることができます

最後に

パラメータ取得についての解説記事は多数ありますが、大雑把な説明がほとんどのため、今回は一つずつ解説を入れてみました。