document.createTextNodeについて

Question

質問は下記なのですが、<p>タグを含めた文字列を作成してからhtmlに挿入しようとしたのですが、文字列がtestではなく[object Text] になってしまいます。なぜでしょうか？

const st="test";

//これは "test" と表示される
console.log(document.createTextNode(st));

//これは <p>[object Text]</p> と表示される
console.log(`<p>${document.createTextNode(st)}</p>`);

Answer 1

確かに、Google Chrome などのブラウザでは document.createTextNode('test') の結果をコンソールに出力すると、"test" と出力されますが、これはText 要素であり、文字列 "test" とは異なります。

console.log(typeof 'test')                                // => string
console.log(typeof document.createTextNode('test'))       // => object
console.log(typeof `${document.createTextNode('test')}`)  // => string

console.log('test')                                       // => test
console.log(document.createTextNode('test'))              // => "test" (ブラウザによる)
console.log(`${document.createTextNode('test')}`)         // => [object Text]

コンソールにオブジェクトを出力した場合のブラウザの描画方法と、 JavaScript がオブジェクトを文字列に変換する際に実行する暗黙の型変換は常に同一とは限らないため、このような違いが出ます。

Comments

[takahashi-one]

回答ありがとうございます。
と言うことは下記のようにするのはそもそも間違いと言うことでしょうか？
```javascript
`<p>${document.createTextNode(st)}</p>`
```

[maisumakun]

ですね。HTML文字列に混ぜ込むものではありません。

[R.Mizukami]

そのコードで何をしたいのかにもよりますが……、`<p>${st}</p>` じゃダメなのですか？
それとも作りたいのは文字列ではなく、特定の文字を持った <p> タグなのでしょうか？

[takahashi-one]

https://observablehq.com/@d3/color-legend
上記サイトの下のほうにこのコードがありまして、ここではちゃんと文字が表示されてるんですよね。
${document.createTextNode(label)}

[maisumakun]

> 上記サイトの下のほうに

これはhtml``と書かれているように、タグ付きテンプレートです。通常の変数展開とは異なります。

[takahashi-one]

回答ありがとうございます。タグ付きテンプレートって言うんですか。このままコピペすると
html is not definedってなるのでhtmlを削除して使ってました。
[タグ付きテンプレート html] でググったのですが、このhtmlタグってこのコードの作成者が作ったタグ付きテンプレートですか？
どのようなタグを作成すると${document.createTextNode(label)}がちゃんと指定文字で表示されるか解りますか？

[maisumakun]

> このhtmlタグってこのコードの作成者が作ったタグ付きテンプレートですか？

おそらく、何かしらのライブラリで提供されているものと思われます（が、正体不明です）。

[takahashi-one]

なんかこのhtmlタグのコードが相当複雑なような気がするので${st}で対応することにしました。ありがとうございました。