迹忆客 专注技术分享

当我们对不是字符串的值调用 toUpperCase() 方法时，会发生“TypeError: toUpperCase is not a function”错误。

要解决此错误，需要将值转换为字符串或确保仅对字符串调用 toUpperCase 方法。

下面是产生上述错误的示例代码

const str = {};

// ⛔️ TypeError: str.toUpperCase is not a function
const result = str.toUpperCase();

我们在一个对象上调用了 String.toUpperCase 方法并返回了错误。

只对字符串调用 toUpperCase() 方法

要解决该错误，请确保仅对字符串调用 toUpperCase() 方法。

我们可以使用 String() 构造函数或 toString() 方法将值转换为字符串。

const num = 123;

const result1 = num.toString().toUpperCase();
console.log(result1); // 👉️ 123

const result2 = String(num).toUpperCase();
console.log(result2); // 👉️ 123

String() 构造函数和 toString() 方法用于将提供的值转换为字符串。

在调用 toUpperCase() 之前检查该值是否为字符串

或者，我们可以在调用 toUpperCase() 方法之前检查该值是否为字符串。

const str = null;

const result = typeof str === 'string' ? str.toUpperCase() : '';

console.log(result); // 👉️ ""

我们使用了一个三元运算符来检查 str 变量是否存储了一个字符串。

如果是，则返回逗号左边的值，否则返回右边的值。

我们还可以使用简单的 if 语句来检查该值是否为字符串。

const str = null;

let result = '';

if (typeof str === 'string') {
  result = str.toUpperCase();
}

console.log(result); // 👉️ ""

如果该值是一个字符串，我们返回对其调用 toUpperCase() 方法的结果，否则，我们返回一个空字符串以保持一致。

将数组中的所有字符串转换为大写

如果要将数组中的所有字符串都转换为大写，请使用 map() 方法遍历数组并对每个字符串调用 toUpperCase() 方法。

const arr = ['hey', 'hi', 'hello'];

const result = arr.map(str => str.toUpperCase());

// 👇️ ['HEY', 'HI', 'HELLO']
console.log(result);

我们传递给 Array.map 方法的函数会针对数组中的每个元素进行调用。

在每次迭代中，我们使用 str.toUpperCase() 方法将当前字符串转换为大写并返回结果。

map() 方法返回一个新数组，其中包含从回调函数返回的值。

如果错误仍然存在，请使用 console.log() 我们调用 toUpperCase 方法的值，并使用 typeof 运算符检查其类型。

console.log(typeof 'jiyik.com'); // 👉️ string
console.log(typeof null); // 👉️ object
console.log(typeof 123); // 👉️ number

如果该值是一个对象，则很有可能我们忘记访问需要调用 toUpperCase() 方法的特定属性。

// ✅ 在调用 toUpperCase 之前访问对象属性
const obj = {
  site: 'jiyik.com',
};

const result1 = obj.site.toUpperCase();
console.log(result1); // 👉️ JIYIK.COM

// -------------------------------------------
// ✅ 在调用 toUpperCase 之前访问数组元素

const arr = ['fql', 'jiyik', 'com'];

const result2 = arr[0].toUpperCase();
console.log(result2); // 👉️ FQL

在调用 toUpperCase() 方法之前，我们访问了对象中的属性和数组中的元素。

总结

当我们对不是字符串的值调用 toUpperCase() 方法时，会发生“TypeError: toUpperCase is not a function”错误。

要解决此错误，需要将值转换为字符串或确保仅对字符串调用 toUpperCase 方法。