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

🧠 Test Your Knowledge

What does [1, 2, 3].toString() return?