JavaScript toString() Method
Convert any value to a string representation
🔄 What is toString()?
The toString() method converts a value to a string. Every JavaScript object has a toString() method that returns a string representation of the object.
// Basic toString() usage
let number = 42;
let boolean = true;
console.log(number.toString()); // "42"
console.log(boolean.toString()); // "true"
Output:
number.toString(): "42"
boolean.toString(): "true"
toString() with Different Data Types
Numbers
Convert numbers to strings
let num = 123;
num.toString(); // "123"
Booleans
Convert true/false to strings
true.toString(); // "true"
false.toString(); // "false"
Arrays
Join array elements as string
let arr = [1, 2, 3];
arr.toString(); // "1,2,3"
Objects
Default object string representation
let obj = {};
obj.toString(); // "[object Object]"
🔹 Number toString() with Radix
Numbers can be converted to different number systems:
let number = 255;
// Default (base 10)
console.log(number.toString()); // "255"
// Binary (base 2)
console.log(number.toString(2)); // "11111111"
// Octal (base 8)
console.log(number.toString(8)); // "377"
// Hexadecimal (base 16)
console.log(number.toString(16)); // "ff"
// Custom base (base 36)
console.log(number.toString(36)); // "73"
// Another example
let decimal = 10;
console.log(decimal.toString(2)); // "1010" (binary)
console.log(decimal.toString(16)); // "a" (hexadecimal)
Output:
255 in decimal: "255"
255 in binary: "11111111"
255 in octal: "377"
255 in hex: "ff"
10 in binary: "1010"
10 in hex: "a"
🔹 Array toString() Examples
Arrays join their elements with commas:
// Simple arrays
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.toString()); // "1,2,3,4,5"
let fruits = ["apple", "banana", "orange"];
console.log(fruits.toString()); // "apple,banana,orange"
// Mixed arrays
let mixed = [1, "hello", true, null];
console.log(mixed.toString()); // "1,hello,true,"
// Nested arrays
let nested = [1, [2, 3], 4];
console.log(nested.toString()); // "1,2,3,4"
// Empty array
let empty = [];
console.log(empty.toString()); // ""
// Array with one element
let single = ["hello"];
console.log(single.toString()); // "hello"
Output:
numbers: "1,2,3,4,5"
fruits: "apple,banana,orange"
mixed: "1,hello,true,"
nested: "1,2,3,4"
empty: ""
single: "hello"
🔹 Custom toString() Methods
You can define custom toString() methods for objects:
// Custom toString() for objects
let person = {
name: "John",
age: 30,
city: "New York",
toString: function() {
return `${this.name}, ${this.age} years old, from ${this.city}`;
}
};
console.log(person.toString()); // "John, 30 years old, from New York"
console.log(String(person)); // Same result
// Another example - Car object
let car = {
brand: "Toyota",
model: "Camry",
year: 2022,
toString: function() {
return `${this.year} ${this.brand} ${this.model}`;
}
};
console.log(car.toString()); // "2022 Toyota Camry"
// Default object without custom toString()
let defaultObj = { name: "test" };
console.log(defaultObj.toString()); // "[object Object]"
Output:
person: "John, 30 years old, from New York"
car: "2022 Toyota Camry"
defaultObj: "[object Object]"
🔹 toString() vs String() vs Template Literals
Different ways to convert values to strings:
let number = 42;
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
// Using toString() method
console.log(number.toString()); // "42"
console.log(boolean.toString()); // "true"
// console.log(nullValue.toString()); // Error! null has no toString()
// console.log(undefinedValue.toString()); // Error! undefined has no toString()
// Using String() constructor (safer)
console.log(String(number)); // "42"
console.log(String(boolean)); // "true"
console.log(String(nullValue)); // "null"
console.log(String(undefinedValue)); // "undefined"
// Using template literals
console.log(`${number}`); // "42"
console.log(`${boolean}`); // "true"
console.log(`${nullValue}`); // "null"
console.log(`${undefinedValue}`); // "undefined"
// Concatenation with empty string
console.log(number + ""); // "42"
console.log(boolean + ""); // "true"
Output:
toString() works for most values
String() is safer (handles null/undefined)
Template literals: convenient and safe
String concatenation: simple but implicit