@rempeiposted at 2023-07-24

encodedURIComponent()って使えないの？

Q&A

Closed

解決したいこと

下記のようにurlを作成してみたのですが、
urlの${encodedName}の部分が表示されません。
encodedNameだけconsole.logで表示すると
encodedName:%E3%81%9F%E3%82%8D%E3%81%86
のように表示されるのですがなぜでしょうか？

codePenとかで同じコードを書くと
"encodedName:%E3%81%9F%E3%82%8D%E3%81%86"
"urlは/detail/%E3%81%9F%E3%82%8D%E3%81%86だよ"
のようにurlの末尾にencodedNameが表示されるのですが
自分のvscodeでかいたものをブラウザのコンソールを見ると
下記のようになってしまいます。
この現象に心当たりのある方はいらっしゃいますでしょうか？

Windows10
Play　1.4.5

該当するソースコード

const selectedName = "たろう";
const encodedName = encodeURIComponent(selectedName);
const url = `/detail/${encodedName}`;

console.log("encodedName:" + encodedName);
console.log("urlは" + url + "だよ");

// encodedName:%E3%81%9F%E3%82%8D%E3%81%86
// urlは/detail/だよ

2Answer

@Verclene posted at 2023-07-24

本件おそらくPlay frameworkが悪さしているように見受けられますので,前回の方に回答しました.

いやにPlayが古いと思って調べてみたらそういうことでした.嫌な予感てするもんですね…

3Like

@SurferOnWww posted at 2023-07-24

下記のようにurlを作成してみたのですが、結果は「urlは/detail/だよ」

意味不明です。「たろう」のはずなのに「だよ」になったのがおかしいと言ってます？

ちなみに質問者さんのコードを以下のようにそのまま使って結果を出力すると、

const selectedName = "たろう";
const encodedName = encodeURIComponent(selectedName);
const url = `/detail/${encodedName}`;

console.log(encodedName);
console.log(url);

以下の通りとなります。

%E3%81%9F%E3%82%8D%E3%81%86
/detail/%E3%81%9F%E3%82%8D%E3%81%86

以下の MDN の記事に書いてある通りの結果で、おかしなことは一つもありませんけど？

encodeURIComponent()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

1Like

Comments

@rempei
Questioner
ご回答ありがとうございます。
分かりにくかったようなので訂正しました。

codePenとかでこのコードだけ打ってみるとおっしゃる通りになるのですが、
自分のvscodeで打ったものを表示すると

// encodedName:%E3%81%9F%E3%82%8D%E3%81%86
// urlは/detail/だよ

となり、encodedName部分が表示されません。
なにか心当たりはあるでしょうか？
@albireo

自分のvscodeで打ったものを表示すると
自分のvscodeでかいたものをブラウザのコンソールを見ると

ブラウザはvscodeで編集したテキストに直接アクセスすることはできません。
一部の内容は表示されているようなので、「vscodeで作成したものをブラウザに表示させるためにやったこと」を具体的に書いた方がいいと思います。
@SurferOnWww

分かりにくかったようなので訂正しました。

最初に質問には console.log("urlは" + url + "だよ"); は書いてなかったですよね。分かりにくいというより、あなたが分かるように書かなかったということです。

なにか心当たりはあるでしょうか？

console.log("urlは" + url + "だよ"); の結果が urlは/detail/だよ だったそうですが、それがホントだったら私の想像の範囲を超える何か変なことをしているとしか思えません。

間違いなく以下のようになるはず。

ソース

結果

Are you sure you want to delete the question?