「url.searchParams.set」についての質問

Question

下記のようなコードでパラメータを変更したurlを変数に入れようとしたのですが、コンソールログを見るとundefinedとあり、何も入っていない状態になります。

	// URLを取得
	let url = new URL(window.location.href);

	// URLSearchParamsオブジェクトを取得
	let params = url.searchParams;

	// URLを変更
	let abcUrl = params.set('link','abc');
	
	console.log(abcUrl);

もしかしてパラメータを変数にセットする場合、searchparamsは使用することが出来ないのでしょうか？

ご存じの方がいましたらお教えいただけますと幸いです。
宜しくお願い致します。

Answer 1

コンソールログを見るとundefinedとあり、何も入っていない状態になります。

URLSearchParams#setは値を返しません（MDN）。代わりにparamsが破壊的に変更されますので、そちらを使ってください。

Comments

[uiasdue]

お教えいただきありがとうございます。
すみません、殆どコピーペーストでプログラムがあまりわかっていないのですが、使い方としては下記のものであっていますでしょうか？

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search.slice(1));

const abcUrl = params.set('link','abc');
console.log(abcUrl);

[maisumakun]

> 使い方としては下記のものであっていますでしょうか？

元のコードから書き換えていないのに、合っているわけがないかと思うのですが、どうしてそのまま提示されたのでしょうか？

[uiasdue]

let params = url.searchParams;
の部分を変更すればよいのかと思い提示してしまいました。
大変申し訳ございません。

[maisumakun]

> let params = url.searchParams;
の部分を変更すればよいのかと思い提示してしまいました。

自分の回答を読んでその理解をする理屈がわからないです。

Answer 2

params.set('link','abc'); を実行すると params が更新されます。params は url の一部ですから、

	params.set('link','abc');
	let abcUrl = url.toString();

です。