javascript エラー「Uncaught TypeError: xxx.split is not a function」の解決方法

javascript エラー「Uncaught TypeError: xxx.split is not a function」の解決方法

javascriptで、エラー「Uncaught TypeError: xxx.split is not a function」が発生した場合の原因と解決方法を記述してます。文字列以外に「split」を使用した際に発生します。ここでは「chrome」と「firefox」と「safari」で発生するエラーメッセージを掲載してます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 110.0.5481.78

エラー内容

以下の、数字の「2」で分割しようとしたコードにて発生。

const num = 12324;

const result = num.split('2');

エラーメッセージ

Uncaught TypeError: num.split is not a function

画像

firefox107の場合でも同じエラーが発生します。

Uncaught TypeError: num.split is not a function

画像

safari15.5では、以下のエラーとなります。

TypeError: num.split is not a function. (In 'num.split(' ')', 'num.split' is undefined)

画像

原因

「split」は、文字列にしか使用できないため

解決方法

「文字列」に変換して使用するか、

const num = 12324;

const result = num.toString().split('2');

console.log( result ); // ['1', '3', '4']

「文字列」であるかを判定してから使用する

const num = 12324;

const result = typeof num === 'string' ? num.split('2') : '文字列ではありません';

console.log(result); // 文字列ではありません

その他のパターン

map.keys()に使用

「map.keys()」などの「Iterator」を「split」で配列化しても同様のエラーが発生します。

const map = new Map();

map.set('name', 'mebee').set('age', 22);

console.log(toString.call( map.keys())); // [object Map Iterator]

const keys = map.keys().split('');
// Uncaught TypeError: map.keys(...).split is not a function

配列化するなら「スプレッド構文」を使用します。

const map = new Map();

map.set('name', 'mebee').set('age', 22);

console.log(toString.call( map.keys())); // [object Map Iterator]

const keys = [...map.keys()];

console.log(keys); // ['name', 'age']