new String(document.location)すると、String {0: "h", 1: "t"となる理由。 [[PrimitiveValue]]はどうやって使うの？

Question

document.location実行するとLocationオブジェクトを取得すると思うのですが、その際、new Stringすると、なぜ下記のような結果になるのでしょうか？
・Locationオブジェクトのhrefプロパティを分割してオブジェクトへ格納するという決まりがあるのでしょうか？

new String(document.location);
//結果
String {0: "h", 1: "t", 2: "t", 3: "p", 4: ":", 5: "/", 6: "/", (中略), length: ××, [[PrimitiveValue]]: "https://teratail.com/"}

---

また、この時取得できた(?)[[PrimitiveValue]]は何ですか？
・PrimitiveValueは内部キー？
・Stringオブジェクトの値(?)が"https://teratail.com/"ってこと？
・今後どうやって使用するのでしょうか？

Answer 1

document.locationに格納されているLocationオブジェクトには、toStringメソッドが実装されています。

Object.prototype.toString() - JavaScript | MDN

このメソッドは全てのオブジェクトに存在し、オブジェクトが文字列変換される場合に呼び出されます。そして、toStringメソッドの返り値が対象のオブジェクトを変換した文字列となります。

LocationオブジェクトのtoStringメソッドは、オブジェクトが示すURL（hrefプロパティと同じ値）を返すようになっています。

window.location - Web API インターフェイス | MDN

このため、以下のように、Locationオブジェクトが文字列変換されるようなコードでは、変換結果がURLとなります。

document.location + "" // "https://teratail.com/"
String(document.location) // "https://teratail.com/"

---

さて、new Stringした場合に返された値ですが、これはStringオブジェクトです。
通常の文字列（"abc"など）とほぼ同じものであり、実際、ただの文字列として扱う分には違いはありません。

ただし、前者がプリミティブ型の文字列であるのに対し、後者はStringオブジェクトです。typeof演算子の判定結果は異なりますし、後者はオブジェクトのように、任意のプロパティやメソッドを追加できます。
以下が、分かりやすい解説ページです：

• JavaScriptのオブジェクトとプリミティブ型の違い - Miuran Business Systems
• String - JavaScript | MDN #プリミティブ値とオブジェクトの区別

[[PrimitiveValue]]は、Stringオブジェクトの文字列としての値情報が格納されているプロパティです。なので、「Stringオブジェクトの値が"https://teratail.com/"」ということになります。

一方で、一文字ずつ分解されて格納されているプロパティは、文字列に対して以下の様な処理を行えるようにするために存在します。

JavaScriptプログラミング講座【文字列について（String）】 #配列アクセス演算子について

"example"[1] // "x"
"hogehoge"[6] // "g"

---

まとめます。

Locationオブジェクトのhrefプロパティを分割してオブジェクトへ格納するという決まりがあるのでしょうか？

• Locationオブジェクトは、文字列化したときにhrefプロパティの値になるよう動作します。
• Stringオブジェクトは配列アクセス演算子（[0]など）による操作を可能にするため、文字列を分割して格納するようにできています。

それぞれ、別のオブジェクトの「決まり」であり、この2つが組み合わさった時にそのような動作をします。

Stringオブジェクトの値(?)が"https://teratail.com/"ってこと？

と解釈しても問題ありません。

今後どうやって使用するのでしょうか？

文字列としてしか使用しないなら、new StringによるStringオブジェクトの取得ではなく、最初に例示したコードのような形でプリミティブ型の文字列を取得したほうが良いと思います。
文字列として利用するだけなら動作に変わりは無いので、ややこしくないプリミティブ型の文字列の方が適切です。

一方、Mithrilのm.trust関数のように、文字列値に独自のプロパティやメソッドを加えたいなら、Stringオブジェクトを利用した方が良いでしょう。
m.trustの場合、「$trustedというプロパティを加えたStringオブジェクト」を生成する事で、普通の文字列と区別しています。

mithril.js/mithril.js at next · lhorie/mithril.js

m.trust = function (value) {
	value = new String(value) // eslint-disable-line no-new-wrappers
	value.$trusted = true
	return value
}

Comments

[re97]

・回答＆詳細解説ありがとうございました
・説明、大変分かりやすかったです
・参考になりました

[sounisi5011]

「PrimitiveValueは内部キー？」については、「内部キー」がどのようなものを意図しているのか分からなかったため回答できませんでした…

[re97]

・コメントありがとうございました
・[[hoge]]のようなカッコで囲うと内部的に特別な意味があるのかな、と思い質問しただけです
・本当に知りたいことは既に回答いただいたので、大丈夫です

Answer 2

詳しくはこちら↓を読んでもらうとして。
String - JavaScript | MDN

この時取得できた(?)[[PrimitiveValue]]は何ですか？

上のリンクで説明がある「プリミティブ値」というものです。
実際にプリミティブ値を取得するには「valueOf()」というメソッドを使います。

ちなみに「new String("abc")」などとやっても
「String {0:"a", 1:"b", 2:"c", (略」などとなります。
これは配列にアクセスするように添え字を使って文字列の各文字にアクセスする方法に対する実装結果だと思います。

Comments

[re97]

・回答ありがとうございました

＞実際にプリミティブ値を取得するには「valueOf()」というメソッドを使います
・なるほど

＞ちなみに「new String("abc")」などとやっても「String {0:"a", 1:"b", 2:"c", (略」などとなります
・初めて気が付きました
・参考になりました