この投稿では、あらゆる種類の値を文字列に変換するための4つの異なる良い方法と悪い方法を見ていきます。

以下の値を考慮して変換します。

console.log(typeof 1);
//number
console.log(typeof true)
//boolean
console.log(typeof null)
//object
console.log(typeof undefined)
//undefined
console.log(Array.isArray([1,2,3]))
//true
console.log(typeof { msg: 'Hi' })
//object
console.log(typeof Symbol('id'));
//symbol

String組み込み関数の使用

String組み込み関数は、文字列に任意の値を変換することができます。これは、プリミティブ型を文字列に変換するための最良のオプションです。

String(1)
//'1'
String(true)
//'true'
String(null)
//'null'
String(undefined)
//'undefined'
String([1,2,3])
//'1,2,3'
String({ msg: 'Hi'})
//'[object Object]'
String(Symbol('id'))
//'Symbol(id)'

テンプレート文字列の使用

テンプレート文字列を使用すると、式を埋め込むことができます。これらの式は文字列に変換されます。以下の例を確認してください。

`${1}`
//'1'
`${true}`
//'true'
`${null}`
//'null'
`${undefined}`
//'undefined'
`${[1,2,3]}`
//'1,2,3'
`${{ msg: 'Hi'}}`
//'[object Object]'

`${Symbol('id')}`
//Cannot convert a Symbol value to a string

JavaScriptでは、すべてのオブジェクトはObject.prototype。から継承します。つまり、すべてのユーザーが、を含むそのオブジェクトに格納されているメソッドにアクセスできますtoString。

これは、toStringオブジェクトまたは配列を呼び出した結果です。

[1,2,3].toString()
//'1,2,3'
{ msg: 'Hi'}.toString()
//'[object Object]'

const prototype = {
  toString(){
    return JSON.stringify(this);
  }
}
const obj = Object.create(prototype);
obj.msg = 'Hi';
console.log(obj.toString());
//''{"msg":"Hi"}''

toString数値やブール値などのプリミティブでメソッドを呼び出すことができるのは興味深いことです。以下のコードを確認してください。

(1).toString()
//'1'
true.toString()
//'true'
Symbol('id').toString()
//'Symbol(id)'

除くすべてのプリミティブのためnullとundefinedJavaScriptが組み込まれているようなラッパーの機能NumberやBoolean。これらの関数コンストラクターを使用してオブジェクトを作成toStringしてから、新しく作成されたオブジェクトのメソッドを呼び出します。このようなことが舞台裏で起こります。

new Number(1).toString()

null.toString()
//Cannot read property 'toString' of null
undefined.toString()
//Cannot read property 'toString' of undefined

文字列に変換するための最後のオプションは、文字列の連結を行うことです。次の例を確認してください。

'' + 1
//'1'
'' + true
//'true'
'' + null
//'null'
'' + undefined
//'undefined'
'' + [1,2,3]
//'1,2,3'
'' + { msg: 'Hi'}
//'[object Object]'

数値を加算する代わりに連結を行うと、次のようになります。

1 + '2'
//'12'

console.log('' + Symbol('id'))
//Cannot convert a Symbol value to a string

文字列変換に関して共有したかったのはこれだけです。読んでくれてありがとう。