別再被坑了！JavaScript の型検出のベストプラクティス#
JavaScript では、変数の型を判断する必要がよくあります。この要件はプログラミングで非常に一般的であり、異なるタイプのデータがコードのロジックに影響を与えるからです。
JavaScript には、データ型を検出するためのいくつかの方法が用意されており、それぞれに利点と欠点があります。
Object.prototype.toString.call()#
これは最も汎用性のある方法です。これにより、組み込みの JavaScript のすべてのタイプ、基本型および複雑な型を正確に識別することができます。どのようなデータを渡しても、統一された形式の文字列を返し、そのデータの実際の型を示します。
これはオブジェクトの内部の [[Class]] プロパティを呼び出すことによって動作します。このプロパティは読み取り専用であり、変更することはできないため、非常に信頼性があります。
利点：
- 幅広い範囲を識別でき、基本型と複雑な型の両方を識別できます。
- オブジェクト自体の
toString()メソッドの影響を受けません。 - 結果の形式が統一されており、解析が容易です。
欠点：
- 書き方がやや冗長です。
- カスタム型の場合、
[object Object]のような結果しか得られず、さらに型を区別することはできません。
function detectType(data) {
return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}
console.log(detectType(123)); // 'number'
console.log(detectType('abc')); // 'string'
console.log(detectType(true)); // 'boolean'
console.log(detectType(null)); // 'null'
console.log(detectType(undefined)); // 'undefined'
console.log(detectType([])); // 'array'
console.log(detectType({})); // 'object'
console.log(detectType(function () {})); // 'function'
console.log(detectType(new Date())); // 'date'
console.log(detectType(new RegExp())); // 'regexp'
console.log(detectType(new Error())); // 'error'
typeof#
この演算子は最も一般的に使用され、書き方も簡単です。基本型と関数を識別することができますが、複雑な型の識別能力は限られています。
利点：
- 使用が簡単です。
- 基本型と関数を識別できます。
欠点：
- 配列と通常のオブジェクトを区別することができません。
typeof nullの結果は'object'です。Date、RegExpなどの組み込みオブジェクトの型を識別できません。
console.log(typeof 123); // 'number'
console.log(typeof 'abc'); // 'string'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object' (これは歴史的なバグです)
console.log(typeof []); // 'object'
console.log(typeof {}); // 'object'
console.log(typeof function () {}); // 'function'
instanceof#
instanceof 演算子は、オブジェクトのプロトタイプチェーン内にコンストラクタの prototype プロパティが存在するかどうかをテストするために使用されます。
利点：
- オブジェクトが特定のクラスまたはコンストラクタに属しているかどうかを確認できます。
欠点：
- オブジェクトの型のみをチェックできます。基本型をチェックすることはできません。
- 複数の型を識別するためには、複数回呼び出す必要があります。
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function () {} instanceof Function); // true
console.log(new Date() instanceof Date); // true
console.log(new RegExp() instanceof RegExp); // true
console.log(new Error() instanceof Error); // true
console.log(123 instanceof Number); // false
console.log('abc' instanceof String); // false
console.log(true instanceof Boolean); // false
constructor#
constructor はオブジェクトのプロパティであり、そのオブジェクトを作成したコンストラクタを指します。これを使用してオブジェクトの型を判断することができます。
利点：
- 多くのオブジェクトの型を識別できます。カスタム型も含まれます。
欠点：
- オブジェクトの
constructorプロパティが変更されている場合、誤った結果が得られます。 nullとundefinedにはconstructorプロパティがありません。
console.log((123).constructor === Number); // true
console.log('abc'.constructor === String); // true
console.log(true.constructor === Boolean); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(function () {}.constructor === Function); // true
console.log(new Date().constructor === Date); // true
console.log(new RegExp().constructor === RegExp); // true
console.log(new Error().constructor === Error); // true
まとめ#
完全かつ正確な型の識別が必要な場合は、Object.prototype.toString.call() が最良の選択肢です。
基本的な型の単純な区別だけが必要な場合は、typeof で十分です。
オブジェクトが特定の型に属しているかどうかをチェックする場合は、instanceof を使用できます。
実際のアプリケーションでは、具体的な要件に応じて適切な方法を選択することができます。
結論#
前回、私は無駄なリポジトリを一括でクリーンアップするツールを開発しました。興味があれば、ぜひご覧ください！😊
記事の紹介： https://mp.weixin.qq.com/s/t7lgc6b7xJiNhfm5vWo5-A
GitHub リポジトリの URL： https://github.com/yaolife ng0629/del-repos
このツールが役に立った場合は、私の GitHub リポジトリに スターを付ける のを忘れないでください ⭐！あなたのサポートは私の前進の原動力です！
お読みいただき、ありがとうございました。また次回お会いしましょう！
