ブラウザ内ツール
URLエンコード / デコード
文字列をパーセントエンコードします。encodeURIComponent と encodeURI を並べて表示するので、 「値にはComponent、URL全体にはURI」の使い分けが直感で分かります。入力は送信しません。
encodeURIComponentクエリの値・パス要素などパーツ向け（/ ? & = も変換）https%3A%2F%2Fexample.com%2F%E6%A4%9C%E7%B4%A2%3Fq%3Da%20b%26tag%3DC%2B%2B
encodeURIURL全体向け（/ ? & = : は温存）https://example.com/%E6%A4%9C%E7%B4%A2?q=a%20b&tag=C++
パラメータの値を組み立てるときは encodeURIComponent。これは / ? & = まで%XX にするので、値の中の & がパラメータ区切りと誤認されるのを防げます。 すでに組み上がったURL全体を軽く整えるだけなら encodeURI。多くの「+ が空白にならない」等のバグは、 この2つの取り違えが原因です。
どちらを使う？
- クエリの値や1つのパス要素を作るなら
encodeURIComponent。/ ? & =まで変換します。 - すでに構造のあるURL全体を軽く整えるだけなら
encodeURI。区切り記号は温存します。 - フォーム送信(application/x-www-form-urlencoded)では空白が
+になる流儀もあり、%20と混同しがち。