JavaScriptでURLから指定のパラメータを削除したい

Question

前提・実現したいこと

URLからfooのパラメータだけを削除したいです。

例
'https://example.com?foo=1&bar=2&foo=3'
↓
'https://example.com?bar=2'

発生している問題・エラーメッセージ

MDN Web Docsにて、専用の関数を見つけました。
URLSearchParams.delete()

しかし実現したいように処理されず、fooが削除された結果のURLが見当たりません。

該当のソースコード

下記を実行しました。上の５行はMDN Web Docsにあるままで、下の3行でfooが削除された結果のURLを探そうとしています。

let url = new URL('https://example.com?foo=1&bar=2&foo=3');
let params = new URLSearchParams(url.search.slice(1));

// foo パラメーターを削除します。
params.delete('foo'); // クエリー文字列は現在: 'bar=2'

// 削除されているかどうか確認
console.log('url =',url);
console.log('params =',params);

実行画像がこちらで、どこにもfooが削除された結果のURLが見当たりません。

試したこと

その他の方法を検索すると、URLのクエリ文字列をJavaScriptで指定して削除するなどがありますが長いコードになりますし、せっかく専用の関数が用意されているのであればそれを使いたいと思っています。

該当のソースコードは使い方が間違っているのでしょうか？
またはどの値を確認すればfooが削除された結果のURLが見当たるでしょうか？

Comments

[takasima20]

「fooが削除された結果のURL」を見てどうしたいんスか?

Answer 1

const url = new URL('https://example.com?foo=1&bar=2&foo=3');
const params=url.searchParams;
params.delete('foo');
params.append('piyo','あいう');
console.log(url.toString());

ちょっと見やすく調整

Comments

[nikuatsu]

ありがとうございます。完璧なご回答でした。
恐れながらなぜ .toString() で抽出されるのか教えていただけますでしょうか。

MDN Web Docs（ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString ）を見ましたが「> オブジェクトを表す文字列を返します」とあり、その機能がなぜ今回のような抽出を実現したのかが理解できません。

[yambejp]

urlはURLオブジェクト、paramsはURLから参照するURLSearchParamsオブジェクトです
paramsを操作するとurlが更新され、urlのtoStringメソッドで変更後情報が表示できます
url.toString()メソッドはurl.hrefプロパティと同義のようです

https://developer.mozilla.org/ja/docs/Web/API/URL

[nikuatsu]

なるほど。私が挙げた Object.prototype.toString() ではなく URL.toString() というメソッドが働いていたのですね。どうもありがとうございました。

[nikuatsu]

いまふと思ったのですが、ご回答はどうして

const params
のように「const」で宣言しているのに、

params.append('piyo','あいう');
のように「append」が効くのでしょうか？

上書きされうるものは「const」でなく「let」と覚えているのですが、なぜご回答がその例外なのか疑問に思いました…