JavaScript で値を文字列化する短いコード
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ `${value}`
◆ "" + value
◆ String(value)
◆ value.toString()
◆ "" + value
◆ String(value)
◆ value.toString()
JavaScript で文字列型に変換する方法です
自分自身色々使っててどれがいいのだろうと考えてみました
上 2 つが同じ長さです
IE では使えません
処理の中身を考えると他よりは遅そうですが 気にするほどでもないでしょう
個人的に 短く書きたいなら一番のおすすめです
ただ 記号多めでタイプするのが時間かかるので自分ではあんまり使ってないです
+ 前後の半角スペースを書かないなら最短コードです
ただ 足し算なので そのまま代入するならともかく 長めの式の中に入れるなら 見やすさと結合順的に () で囲んで
と言っても テンプレートストリングと比べて動きは速いはずですし
さらに打ちやすさでは一番なのでコンソールに打ち込むときなどその場限りに使うときは基本これです
あと後述しますが 他とは違う特徴もあります
の割に ほぼ使ったことがなかったりします
間違って new String(value) とするとオブジェクト型になって扱いづらいので注意です
しかし メソッドなので変数に null や undefined が入ってるとエラーになる欠点があります
null や undefined の可能性が無いことを確認しないといけないので これなら String(value) にした方がいいと思います
私は こっちのほうが使ってたりしますけど
ブラウザ問わずこうなります
文字列内への埋め込みや String 関数や toString メソッドでは「文字列に変換」することを要求されてるので toString メソッドです
文字列型との足し算では 最終的に文字列と足し算なので 最終的に文字列になりますが value の値を取り出すときは toString メソッドでなく valueOf メソッドが使われます
足し算相手が数字かもしれないので toString でなく valueOf になるのは自然なことでしょう
valueOf に独自の関数定義してることなんて珍しくてそんなに気にすることでもないと思いますが そこも気にするならどっちのメソッドの結果がほしいかで 使い分けるといいかもしれません
自分自身色々使っててどれがいいのだろうと考えてみました
`${value}`
"" + value
String(value)
value.toString()
"" + value
String(value)
value.toString()
上 2 つが同じ長さです
`${value}`
ES2015 ~ の方法ですIE では使えません
処理の中身を考えると他よりは遅そうですが 気にするほどでもないでしょう
個人的に 短く書きたいなら一番のおすすめです
ただ 記号多めでタイプするのが時間かかるので自分ではあんまり使ってないです
"" + value
単純に文字列型と足し算することでキャストさせます+ 前後の半角スペースを書かないなら最短コードです
ただ 足し算なので そのまま代入するならともかく 長めの式の中に入れるなら 見やすさと結合順的に () で囲んで
("" + value)
となるので おすすめ度はそれほどですと言っても テンプレートストリングと比べて動きは速いはずですし
さらに打ちやすさでは一番なのでコンソールに打ち込むときなどその場限りに使うときは基本これです
あと後述しますが 他とは違う特徴もあります
String(value)
一番ちゃんとした方法ですの割に ほぼ使ったことがなかったりします
間違って new String(value) とするとオブジェクト型になって扱いづらいので注意です
value.toString()
変数名書いた後に文字列化したいと思ったときに前の方にカーソル戻してカッコつけたりがいらないので書きやすいですしかし メソッドなので変数に null や undefined が入ってるとエラーになる欠点があります
null や undefined の可能性が無いことを確認しないといけないので これなら String(value) にした方がいいと思います
私は こっちのほうが使ってたりしますけど
カスタム toString / valueOf
独自の toString / valueOf を持っていた場合の動きを見てみますconst value = {
toString() { return "tostring" },
valueOf() { return "valueof" },
}
console.log(`${value}`)
console.log("" + value)
console.log(value.toString())
console.log(String(value))
toString() { return "tostring" },
valueOf() { return "valueof" },
}
console.log(`${value}`)
console.log("" + value)
console.log(value.toString())
console.log(String(value))
tostring
valueof
tostring
tostring
valueof
tostring
tostring
ブラウザ問わずこうなります
文字列内への埋め込みや String 関数や toString メソッドでは「文字列に変換」することを要求されてるので toString メソッドです
文字列型との足し算では 最終的に文字列と足し算なので 最終的に文字列になりますが value の値を取り出すときは toString メソッドでなく valueOf メソッドが使われます
足し算相手が数字かもしれないので toString でなく valueOf になるのは自然なことでしょう
valueOf に独自の関数定義してることなんて珍しくてそんなに気にすることでもないと思いますが そこも気にするならどっちのメソッドの結果がほしいかで 使い分けるといいかもしれません