JavaScript Strings

Learn how to create, access, compare, search, extract, modify, combine, format, and work with strings in JavaScript using properties, methods, template literals, escape sequences, Unicode, and real-world examples.

Introduction

Strings are one of the most frequently used data types in JavaScript. Almost every application works with text in some form, including names, messages, passwords, search queries, URLs, email addresses, product descriptions, form values, API responses, and user-generated content.

A JavaScript string is a sequence of characters used to represent textual data. Strings can contain letters, numbers, spaces, punctuation marks, symbols, Unicode characters, and emojis.

JavaScript provides many built-in properties and methods for inspecting, searching, extracting, replacing, formatting, splitting, comparing, and transforming strings.

Understanding strings is essential because text processing appears in frontend development, backend development, form validation, search systems, APIs, authentication, data formatting, and almost every real-world JavaScript application.

What You Will Learn

What strings are in JavaScript.
Why strings are important.
How to create strings.
How single quotes and double quotes work.
How template literals work.
How the String constructor works.
The difference between primitive strings and String objects.
How to create empty strings.
How to find string length.
How to access individual characters.
How bracket notation works.
How charAt() works.
How at() works.
Why strings are immutable.
How escape sequences work.
How to create multiline strings.
How to concatenate strings.
How template interpolation works.
How to compare strings.
How to perform case-insensitive comparisons.
How to change letter case.
How to search inside strings.
How to extract parts of strings.
How to replace text.
How to remove whitespace.
How to pad strings.
How to repeat strings.
How to split strings.
How to convert values to strings.
How to iterate through strings.
How Unicode and emojis affect strings.
How to solve common string problems.
How to build a complete text-processing application.

What is a String?

A string is a sequence of characters enclosed inside quotation marks or backticks.

Basic Strings

const firstName = 'Aarav';

const course = "JavaScript";

const message = `Welcome to PrograMinds`;

console.log(firstName);
console.log(course);
console.log(message);

Output

Every character in a string has a position called an index. JavaScript string indexes begin at 0.

String Indexes

String:  J  a  v  a  S  c  r  i  p  t
Index:   0  1  2  3  4  5  6  7  8  9

Why Do We Need Strings?

Strings allow applications to store, display, receive, validate, search, and transform textual information.

User Information

Store names, usernames, addresses, phone numbers, and profile information.

Messages

Display notifications, alerts, chat messages, validation errors, and application feedback.

Forms

Process text entered into input fields, textareas, search boxes, and login forms.

Search

Search for words, products, users, articles, and other textual content.

URLs

Create, inspect, and transform website addresses and route paths.

API Data

Process text received from servers, databases, and external services.

Validation

Validate passwords, email addresses, usernames, and other input.

Dynamic Interfaces

Generate headings, labels, cards, menus, buttons, and other interface content.

Real-World Analogy

Think of a string like a train. The complete train is the string, while every coach represents one character.

Train Analogy

STRING: "CODE"

        Complete Train
              │
              ▼
     ┌───┬───┬───┬───┐
     │ C │ O │ D │ E │
     └───┴───┴───┴───┘
       0   1   2   3
       ▲   ▲   ▲   ▲
       │   │   │   │
    Character Positions

Each character:
    has an index
    can be accessed
    can be inspected

The original string:
    cannot be changed directly

Creating Strings

JavaScript provides several ways to create strings. The most common approaches use single quotes, double quotes, or template literals.

Creating Strings

const first = 'Single Quotes';

const second = "Double Quotes";

const third = `Template Literal`;

console.log(first);
console.log(second);
console.log(third);

Output

Single Quotes

Single quotes are commonly used to create simple strings.

Single Quote Strings

const language = 'JavaScript';

const message = 'Welcome to the course';

console.log(language);
console.log(message);

Output

If the string itself contains an apostrophe, you can escape it or use another quotation style.

Apostrophe in String

const first = 'I\'m learning JavaScript';

const second = "I'm learning JavaScript";

console.log(first);
console.log(second);

Output

Double Quotes

Double quotes work like single quotes. The choice between them is usually based on project style and readability.

Double Quote Strings

const title = "JavaScript Strings";

const message =
    "This lesson explains text processing.";

console.log(title);
console.log(message);

Output

Template Literals

Template literals use backticks instead of normal quotation marks. They support interpolation, expressions, and multiline text.

Template Literal

const name = 'Priya';

const message =
    `Welcome, ${name}!`;

console.log(message);

Output

Template Literal Advantages

Insert variables directly into strings.
Evaluate JavaScript expressions.
Create multiline strings naturally.
Build dynamic HTML more clearly.
Reduce complicated string concatenation.

String Constructor

The String constructor can convert values into strings. It can also create String objects when used with the new keyword.

String Constructor

const first = String(100);

const second = String(true);

const third = new String('JavaScript');

console.log(first);
console.log(second);
console.log(third);

Output

Avoid new String()

String() creates or converts to a primitive string.
new String() creates an object.
String objects can produce confusing comparison behavior.
Use primitive strings in normal application code.

Primitive String vs String Object

Primitive and Object

const primitive = 'JavaScript';

const object =
    new String('JavaScript');

console.log(typeof primitive);
console.log(typeof object);

Output

Comparison Difference

const first = 'JavaScript';

const second =
    new String('JavaScript');

console.log(first == second);
console.log(first === second);

Output

Strict equality returns false because one value is a primitive and the other is an object.

Empty Strings

An empty string contains no characters and has a length of zero.

Empty String

const message = '';

console.log(message);
console.log(message.length);
console.log(Boolean(message));

Output

Empty strings are falsy values and are commonly used as initial values for form fields and text variables.

String Length

The length property returns the number of UTF-16 code units in a string.

String Length

const language = 'JavaScript';

console.log(language.length);

Output

Length Examples

console.log('Hello'.length);

console.log('Hello World'.length);

console.log(''.length);

Output

Remember

Spaces count as characters.
Punctuation counts as characters.
String indexes begin at 0.
The final normal index is length - 1.
Some Unicode characters may use more than one UTF-16 code unit.

Accessing Characters

Individual characters can be accessed using bracket notation, charAt(), or at().

Accessing Characters

const language = 'JavaScript';

console.log(language[0]);

console.log(language.charAt(1));

console.log(language.at(2));

Output

Bracket Notation

Bracket notation accesses a character using its zero-based index.

Bracket Notation

const word = 'CODE';

console.log(word[0]);
console.log(word[1]);
console.log(word[2]);
console.log(word[3]);

Output

Invalid Index

const word = 'CODE';

console.log(word[10]);

Output

charAt()

The charAt() method returns the character at a specified index.

charAt()

const word = 'JavaScript';

console.log(word.charAt(0));

console.log(word.charAt(4));

console.log(word.charAt(100));

Output

Unlike bracket notation, charAt() returns an empty string for an invalid index.

at()

The at() method accesses characters using positive or negative indexes.

at() Method

const word = 'JavaScript';

console.log(word.at(0));

console.log(word.at(-1));

console.log(word.at(-2));

Output

Why at() is Useful

Positive indexes count from the beginning.
Negative indexes count from the end.
at(-1) returns the final character.
It avoids writing string[string.length - 1].

Character Codes

JavaScript can return the numeric UTF-16 code unit associated with a character.

charCodeAt()

const letter = 'A';

console.log(letter.charCodeAt(0));

Output

Create Character from Code

const letter =
    String.fromCharCode(65);

console.log(letter);

Output

Strings are Immutable

Strings are immutable, which means individual characters in an existing string cannot be changed directly.

Attempting to Modify a String

let word = 'JavaScript';

word[0] = 'Y';

console.log(word);

Output

String methods return new strings instead of modifying the original string.

Creating a New String

const original = 'javascript';

const updated =
    original.toUpperCase();

console.log(original);
console.log(updated);

Output

Escape Sequences

Escape sequences allow special characters to be included inside strings.

Escape Sequences

const quote =
    'She said, "Hello!"';

const apostrophe =
    'I\'m learning JavaScript';

const path =
    'C:\\Users\\Documents';

console.log(quote);
console.log(apostrophe);
console.log(path);

Output

Special Characters

Common Escape Sequences

Escape Sequence     Meaning
--------------------------------
\n                  New line

\t                  Tab

\\                  Backslash

\'                  Single quote

\"                  Double quote

\r                  Carriage return

\b                  Backspace

New Line and Tab

const message =
    'Name:\tAarav\nCourse:\tJavaScript';

console.log(message);

Output

Multiline Strings

Template literals allow multiline strings without manually adding newline escape sequences.

Multiline Template Literal

const message = `
Welcome to PrograMinds.

Learn JavaScript
Build Projects
Become a Developer
`;

console.log(message);

Output

String Concatenation

Concatenation means combining multiple strings into one string.

The + Operator

String Concatenation

const firstName = 'Aarav';

const lastName = 'Sharma';

const fullName =
    firstName + ' ' + lastName;

console.log(fullName);

Output

The += Operator

The += operator appends text to an existing string variable.

Appending Text

let message = 'Hello';

message += ' ';

message += 'JavaScript';

console.log(message);

Output

concat()

The concat() method combines multiple strings and returns a new string.

concat() Method

const first = 'Hello';

const second = 'JavaScript';

const message =
    first.concat(' ', second, '!');

console.log(message);

Output

Template Literal Interpolation

Template interpolation inserts variables into strings using the ${expression} syntax.

String Interpolation

const name = 'Priya';

const course = 'JavaScript';

const message =
    `${name} is learning ${course}.`;

console.log(message);

Output

Expressions in Template Literals

Any valid JavaScript expression can be evaluated inside ${}.

Template Expressions

const price = 1000;

const quantity = 3;

const message =
    `Total: ₹${price * quantity}`;

console.log(message);

Output

Function Call in Template

function formatName(name) {
    return name.toUpperCase();
}

const userName = 'aarav';

console.log(
    `Welcome, ${formatName(userName)}!`
);

Output

Comparing Strings

Strings can be compared using equality and relational operators.

String Comparison

console.log(
    'JavaScript' === 'JavaScript'
);

console.log(
    'JavaScript' === 'javascript'
);

console.log('apple' < 'banana');

Output

Case-Sensitive Comparison

JavaScript string comparisons are case-sensitive.

Case-Sensitive Comparison

const first = 'ADMIN';

const second = 'admin';

console.log(first === second);

Output

Case-Insensitive Comparison

A common approach is to convert both strings to the same case before comparing them.

Case-Insensitive Comparison

const first = 'ADMIN';

const second = 'admin';

const isEqual =
    first.toLowerCase() ===
    second.toLowerCase();

console.log(isEqual);

Output

Locale-Aware Comparison

The localeCompare() method compares strings according to language-aware sorting rules.

localeCompare()

console.log(
    'apple'.localeCompare('banana')
);

console.log(
    'banana'.localeCompare('apple')
);

console.log(
    'apple'.localeCompare('apple')
);

Typical Output

localeCompare() Result

A negative value means the first string comes before the second.
A positive value means the first string comes after the second.
Zero means the strings compare as equal.
The exact negative or positive number should not be relied upon.

Changing String Case

JavaScript provides methods for converting strings to uppercase or lowercase.

toUpperCase()

Uppercase Conversion

const language = 'JavaScript';

const result =
    language.toUpperCase();

console.log(result);

Output

toLowerCase()

Lowercase Conversion

const language = 'JavaScript';

const result =
    language.toLowerCase();

console.log(result);

Output

Searching Strings

JavaScript provides several methods for finding text inside strings.

Common Search Methods

Method            Purpose
-------------------------------------
indexOf()         Find first position

lastIndexOf()     Find last position

includes()        Check existence

startsWith()      Check beginning

endsWith()        Check ending

search()          Search text or pattern

indexOf()

The indexOf() method returns the position of the first occurrence of a value.

indexOf()

const message =
    'Learn JavaScript today';

console.log(
    message.indexOf('JavaScript')
);

console.log(
    message.indexOf('Python')
);

Output

A result of -1 means the search value was not found.

lastIndexOf()

The lastIndexOf() method returns the position of the final occurrence of a value.

lastIndexOf()

const message =
    'JavaScript is powerful. JavaScript is popular.';

console.log(
    message.lastIndexOf('JavaScript')
);

Output

includes()

The includes() method returns true when a string contains the specified value.

includes()

const message =
    'Learn JavaScript today';

console.log(
    message.includes('JavaScript')
);

console.log(
    message.includes('Python')
);

Output

startsWith()

const url =
    'https://programinds.com';

console.log(
    url.startsWith('https://')
);

console.log(
    url.startsWith('http://')
);

Output

endsWith()

const fileName =
    'profile-image.png';

console.log(
    fileName.endsWith('.png')
);

console.log(
    fileName.endsWith('.pdf')
);

Output

search()

The search() method searches for a string or regular expression and returns the matching position.

search() Method

const message =
    'Learn JavaScript Today';

console.log(
    message.search(/javascript/i)
);

Output

Extracting String Parts

JavaScript provides methods for extracting a section of a string without changing the original string.

slice()

The slice() method extracts characters from a start index up to, but not including, an end index.

slice()

const language = 'JavaScript';

console.log(
    language.slice(0, 4)
);

console.log(
    language.slice(4)
);

console.log(
    language.slice(-6)
);

Output

substring()

The substring() method extracts characters between two indexes. Negative values are treated as 0.

substring()

const language = 'JavaScript';

console.log(
    language.substring(0, 4)
);

console.log(
    language.substring(4)
);

Output

slice() vs substring()

Feature              slice()     substring()
-------------------------------------------------
Start Index          Yes         Yes

End Index            Yes         Yes

Negative Indexes     Yes         No

Recommended          Yes         Sometimes

substr() Legacy Method

The legacy substr() method extracts a specified number of characters beginning at a start position. It should generally be avoided in new code.

Legacy substr()

const language = 'JavaScript';

console.log(
    language.substr(4, 6)
);

Output

Legacy Method

substr() is considered legacy.
Avoid using it in new applications.
Use slice() instead.
Do not confuse substr() with substring().

Replacing Text

Strings can be transformed by replacing matching text with new text.

replace()

The replace() method replaces the first matching string when given a normal string search value.

replace()

const message =
    'I love JavaScript';

const updated =
    message.replace(
        'JavaScript',
        'Web Development'
    );

console.log(updated);

Output

replaceAll()

The replaceAll() method replaces every matching occurrence.

replaceAll()

const message =
    'JavaScript is great. JavaScript is powerful.';

const updated =
    message.replaceAll(
        'JavaScript',
        'JS'
    );

console.log(updated);

Output

Regular Expression Replacement

Regular expressions can perform flexible and case-insensitive replacements.

Global Replacement

const message =
    'JavaScript javascript JAVASCRIPT';

const updated =
    message.replace(
        /javascript/gi,
        'JS'
    );

console.log(updated);

Output

Removing Whitespace

Whitespace commonly appears around user input. JavaScript provides methods for removing it.

trim()

const input =
    '   JavaScript   ';

const cleaned =
    input.trim();

console.log(
    `[${cleaned}]`
);

Output

trimStart()

const input =
    '   JavaScript   ';

console.log(
    `[${input.trimStart()}]`
);

Output

trimEnd()

const input =
    '   JavaScript   ';

console.log(
    `[${input.trimEnd()}]`
);

Output

Padding Strings

Padding adds characters to the beginning or end of a string until it reaches a specified length.

padStart()

const number = '42';

const formatted =
    number.padStart(5, '0');

console.log(formatted);

Output

padEnd()

const label = 'Name';

const formatted =
    label.padEnd(10, '.');

console.log(formatted);

Output

Repeating Strings

A string can be repeated multiple times using repeat().

repeat()

const separator =
    '-'.repeat(20);

console.log(separator);

Output

Rating Stars

const rating = 5;

const stars =
    '⭐'.repeat(rating);

console.log(stars);

Output

Splitting Strings

Splitting converts a string into an array based on a separator.

split()

const languages =
    'HTML,CSS,JavaScript';

const result =
    languages.split(',');

console.log(result);

Output

String to Array

Characters to Array

const word = 'CODE';

const characters =
    word.split('');

console.log(characters);

Output

Sentence to Words

const sentence =
    'Learn JavaScript Today';

const words =
    sentence.split(' ');

console.log(words);

Output

Array to String

The join() method combines array elements into a string.

Array to String

const words = [
    'Learn',
    'JavaScript',
    'Today'
];

const sentence =
    words.join(' ');

console.log(sentence);

Output

String Conversion

Numbers, booleans, arrays, and other values can be converted into strings.

String()

String() Conversion

console.log(String(100));

console.log(String(true));

console.log(String(null));

console.log(String(undefined));

Output

toString()

const number = 500;

const text =
    number.toString();

console.log(text);
console.log(typeof text);

Output

Numbers and Strings

The + operator can perform numeric addition or string concatenation depending on the operand types.

Number and String

console.log(10 + 20);

console.log('10' + 20);

console.log(10 + '20');

Output

Type Coercion

Number + Number performs addition.
String + Number usually performs concatenation.
Number + String usually performs concatenation.
Convert values explicitly when the intended behavior must be clear.

Booleans and Strings

Boolean Conversion

const isActive = true;

const text =
    String(isActive);

console.log(text);
console.log(typeof text);

Output

Objects and Strings

Directly converting a normal object to a string often produces a generic result.

Object String Conversion

const user = {
    name: 'Aarav',
    age: 25
};

console.log(String(user));

Output

JSON.stringify() is commonly used when an object must be represented as structured text.

Object to JSON String

const user = {
    name: 'Aarav',
    age: 25
};

const text =
    JSON.stringify(user);

console.log(text);

Output

String Iteration

Strings are iterable, which means their characters can be processed one by one.

for Loop

Iterating with for

const word = 'CODE';

for (
    let index = 0;
    index < word.length;
    index++
) {
    console.log(
        index,
        word[index]
    );
}

Output

for...of Loop

Iterating with for...of

const word = 'CODE';

for (const character of word) {
    console.log(character);
}

Output

Spread Operator

The spread operator can expand a string into individual characters.

Spread String

const word = 'CODE';

const characters = [...word];

console.log(characters);

Output

Unicode Strings

JavaScript strings use UTF-16 internally. Most common characters use one code unit, while some Unicode characters require two.

Unicode Characters

const message =
    'Hello नमस्ते 你好 مرحبا';

console.log(message);

Output

Emoji and Strings

Some emojis use multiple UTF-16 code units, so the length property may not always match the number of visible characters.

Emoji Length

const emoji = '😀';

console.log(emoji.length);

console.log([...emoji].length);

Output

Unicode Awareness

length counts UTF-16 code units.
Some emojis use two code units.
Spread syntax handles many Unicode code points more naturally.
Complex emoji sequences can still contain multiple code points.
Visible character counting can require specialized segmentation.

Code Points

The codePointAt() method returns the Unicode code point of a character.

codePointAt()

const emoji = '😀';

console.log(
    emoji.codePointAt(0)
);

Output

fromCodePoint()

const emoji =
    String.fromCodePoint(128512);

console.log(emoji);

Output

Raw Strings

String.raw returns the raw form of a template literal, preserving backslashes.

String.raw

const path =
    String.raw`C:\Users\Aarav\Documents`;

console.log(path);

Output

Tagged Templates

A tagged template passes template literal parts and values to a function for custom processing.

Tagged Template

function highlight(
    strings,
    value
) {
    return (
        strings[0] +
        value.toUpperCase() +
        strings[1]
    );
}

const course = 'javascript';

const message =
    highlight`Learn ${course} today!`;

console.log(message);

Output

Common String Patterns

Real-world applications repeatedly use certain string-processing patterns. Understanding these patterns improves problem-solving skills.

Capitalize First Letter

function capitalize(text) {
    if (text.length === 0) {
        return '';
    }

    return (
        text[0].toUpperCase() +
        text.slice(1)
    );
}

console.log(
    capitalize('javascript')
);

Output

Reverse a String

Reverse String

function reverseString(text) {
    return [...text]
        .reverse()
        .join('');
}

console.log(
    reverseString('JavaScript')
);

Output

Count Characters

Count a Character

function countCharacter(
    text,
    target
) {
    let count = 0;

    for (const character of text) {
        if (character === target) {
            count++;
        }
    }

    return count;
}

console.log(
    countCharacter(
        'JavaScript',
        'a'
    )
);

Output

Count Words

function countWords(text) {
    const cleaned = text.trim();

    if (cleaned === '') {
        return 0;
    }

    return cleaned
        .split(/\s+/)
        .length;
}

console.log(
    countWords(
        'Learn JavaScript step by step'
    )
);

Output

Check Palindrome

A palindrome reads the same forward and backward.

Palindrome Checker

function isPalindrome(text) {
    const cleaned = text
        .toLowerCase()
        .replace(/[^a-z0-9]/g, '');

    const reversed =
        [...cleaned]
            .reverse()
            .join('');

    return cleaned === reversed;
}

console.log(
    isPalindrome('Madam')
);

console.log(
    isPalindrome('JavaScript')
);

Output

Generate Slug

A slug is a URL-friendly version of text.

Slug Generator

function createSlug(title) {
    return title
        .trim()
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
}

console.log(
    createSlug(
        'JavaScript Strings Complete Guide'
    )
);

Output

Mask Sensitive Text

Mask Card Number

function maskCardNumber(number) {
    const visible =
        number.slice(-4);

    const hidden =
        '*'.repeat(
            number.length - 4
        );

    return hidden + visible;
}

console.log(
    maskCardNumber(
        '1234567812345678'
    )
);

Output

Truncate Long Text

Truncate Text

function truncate(
    text,
    maximumLength
) {
    if (
        text.length <= maximumLength
    ) {
        return text;
    }

    return (
        text.slice(
            0,
            maximumLength
        ) + '...'
    );
}

console.log(
    truncate(
        'JavaScript is a powerful programming language.',
        20
    )
);

Output

Complete String Example

The following example builds a live text analyzer that uses several string properties and methods together.

index.html

<div class="text-analyzer">
    <h2>Text Analyzer</h2>

    <textarea
        id="textInput"
        rows="8"
        placeholder="Enter your text..."
    ></textarea>

    <div class="stats">
        <p>
            Characters:
            <strong id="characterCount">
                0
            </strong>
        </p>

        <p>
            Words:
            <strong id="wordCount">
                0
            </strong>
        </p>

        <p>
            Sentences:
            <strong id="sentenceCount">
                0
            </strong>
        </p>
    </div>

    <div class="actions">
        <button id="uppercaseButton">
            UPPERCASE
        </button>

        <button id="lowercaseButton">
            lowercase
        </button>

        <button id="capitalizeButton">
            Capitalize Words
        </button>

        <button id="clearButton">
            Clear
        </button>
    </div>

    <p id="preview"></p>
</div>

script.js

const textInput =
    document.getElementById(
        'textInput'
    );

const characterCount =
    document.getElementById(
        'characterCount'
    );

const wordCount =
    document.getElementById(
        'wordCount'
    );

const sentenceCount =
    document.getElementById(
        'sentenceCount'
    );

const uppercaseButton =
    document.getElementById(
        'uppercaseButton'
    );

const lowercaseButton =
    document.getElementById(
        'lowercaseButton'
    );

const capitalizeButton =
    document.getElementById(
        'capitalizeButton'
    );

const clearButton =
    document.getElementById(
        'clearButton'
    );

const preview =
    document.getElementById(
        'preview'
    );


textInput.addEventListener(
    'input',
    updateAnalysis
);


uppercaseButton.addEventListener(
    'click',
    function () {
        textInput.value =
            textInput.value.toUpperCase();

        updateAnalysis();
    }
);


lowercaseButton.addEventListener(
    'click',
    function () {
        textInput.value =
            textInput.value.toLowerCase();

        updateAnalysis();
    }
);


capitalizeButton.addEventListener(
    'click',
    function () {
        textInput.value =
            capitalizeWords(
                textInput.value
            );

        updateAnalysis();
    }
);


clearButton.addEventListener(
    'click',
    function () {
        textInput.value = '';

        updateAnalysis();

        textInput.focus();
    }
);


function updateAnalysis() {
    const text =
        textInput.value;

    const trimmedText =
        text.trim();

    characterCount.textContent =
        text.length;

    wordCount.textContent =
        countWords(trimmedText);

    sentenceCount.textContent =
        countSentences(trimmedText);

    preview.textContent =
        createPreview(trimmedText);
}


function countWords(text) {
    if (text === '') {
        return 0;
    }

    return text
        .split(/\s+/)
        .length;
}


function countSentences(text) {
    if (text === '') {
        return 0;
    }

    const sentences =
        text.match(/[^.!?]+[.!?]+/g);

    return sentences
        ? sentences.length
        : 1;
}


function capitalizeWords(text) {
    return text
        .split(' ')
        .map(function (word) {
            if (word === '') {
                return '';
            }

            return (
                word[0].toUpperCase() +
                word.slice(1).toLowerCase()
            );
        })
        .join(' ');
}


function createPreview(text) {
    if (text === '') {
        return 'Preview will appear here.';
    }

    if (text.length <= 80) {
        return text;
    }

    return text.slice(0, 80) + '...';
}


updateAnalysis();

Browser Output

What This Example Demonstrates

Reading text from a textarea.
Using the length property.
Removing unnecessary whitespace.
Splitting text into words.
Using regular expressions with strings.
Converting text to uppercase.
Converting text to lowercase.
Capitalizing words.
Extracting text with slice().
Creating text previews.
Updating browser content dynamically.
Combining strings with DOM events.

String Processing Flow

RAW TEXT
    │
    ▼
┌───────────────────────────┐
│ RECEIVE STRING            │
│                           │
│ Form Input                │
│ API Response              │
│ Database Value            │
│ User Message              │
└─────────────┬─────────────┘
              │
              ▼
┌───────────────────────────┐
│ CLEAN                      │
│                           │
│ trim()                    │
│ replace()                 │
│ replaceAll()              │
└─────────────┬─────────────┘
              │
              ▼
┌───────────────────────────┐
│ VALIDATE                   │
│                           │
│ length                    │
│ includes()                │
│ startsWith()              │
│ endsWith()                │
└─────────────┬─────────────┘
              │
              ▼
┌───────────────────────────┐
│ TRANSFORM                  │
│                           │
│ toUpperCase()             │
│ toLowerCase()             │
│ slice()                   │
│ split()                   │
└─────────────┬─────────────┘
              │
              ▼
┌───────────────────────────┐
│ OUTPUT                     │
│                           │
│ Display                    │
│ Store                      │
│ Send to API               │
│ Generate URL              │
└───────────────────────────┘

Real-World Applications

Form Validation

Clean and validate names, emails, passwords, phone numbers, and other input.

Search Systems

Perform case-insensitive searches and keyword matching.

Chat Applications

Process, format, truncate, and display user messages.

URL Generation

Create slugs, routes, query values, and URL-friendly text.

E-Commerce

Format product names, descriptions, SKUs, and order information.

Email Systems

Build subjects, templates, greetings, and dynamic email content.

Security Interfaces

Mask card numbers, phone numbers, tokens, and other sensitive text.

Text Analytics

Count characters, words, sentences, and keyword occurrences.

API Processing

Clean and transform text received from backend services.

Dynamic HTML

Generate interface text using template literals and variables.

Common Beginner Mistakes

Avoid These Mistakes

Forgetting quotation marks around string values.
Mixing opening and closing quote types incorrectly.
Forgetting to escape apostrophes inside single-quoted strings.
Forgetting to escape double quotes inside double-quoted strings.
Confusing backticks with single quotes.
Using ${} outside a template literal.
Using normal quotes when interpolation is required.
Creating String objects with new String().
Confusing primitive strings with String objects.
Using loose equality because of String object conversion.
Forgetting that string indexes begin at 0.
Using length as the final valid index.
Forgetting that the final index is length - 1.
Trying to modify individual string characters directly.
Forgetting that strings are immutable.
Assuming string methods change the original string.
Not storing the returned value of a string method.
Confusing an empty string with a string containing spaces.
Forgetting that spaces count toward length.
Expecting bracket notation and charAt() to behave identically for invalid indexes.
Forgetting that at() supports negative indexes.
Using + for numeric addition when one operand is a string.
Creating complicated concatenation instead of using template literals.
Forgetting spaces while concatenating strings.
Assuming string comparison is case-insensitive.
Comparing user input without normalizing case.
Assuming localeCompare() always returns exactly -1 or 1.
Forgetting that indexOf() returns -1 when no match exists.
Using indexOf() when includes() would be clearer.
Assuming includes() ignores letter case.
Assuming startsWith() and endsWith() ignore case.
Confusing slice() with substring().
Using legacy substr() in new code.
Forgetting that the end index in slice() is excluded.
Expecting replace() with a string argument to replace every occurrence.
Using replace() when replaceAll() is required.
Forgetting regular expression flags during replacement.
Forgetting to trim user input before validation.
Assuming trim() removes spaces inside the string.
Using split() with the wrong separator.
Forgetting that split() returns an array.
Forgetting that join() belongs to arrays.
Calling toString() on null or undefined.
Assuming String(object) produces useful structured text.
Ignoring JSON.stringify() for object serialization.
Assuming length always equals the number of visible Unicode characters.
Breaking emojis by processing UTF-16 code units incorrectly.
Using split("") for all Unicode-sensitive character operations.
Forgetting to handle empty strings in utility functions.
Counting words with split(" ") without cleaning repeated whitespace.
Creating slugs without removing invalid characters.
Displaying long text without truncation.
Masking sensitive values without checking their length.
Using regular expressions without understanding what they match.
Repeating expensive string transformations unnecessarily.
Ignoring readability when chaining many string methods.

Common String Mistakes

// ❌ Missing quotes
// const language = JavaScript;


// ❌ Mixed quotes
// const message = 'Hello";


// ❌ Wrong final index
const word = 'CODE';

console.log(word[word.length]);
// undefined


// ❌ Trying to mutate a string
let name = 'Aarav';

name[0] = 'P';

console.log(name);
// Aarav


// ❌ Ignoring returned value
let course = 'javascript';

course.toUpperCase();

console.log(course);
// javascript


// ❌ Case-sensitive search
console.log(
    'JavaScript'.includes('javascript')
);
// false


// ❌ replace() replaces one match
console.log(
    'JS JS JS'.replace('JS', 'JavaScript')
);
// JavaScript JS JS


// ❌ Numeric string concatenation
console.log('10' + 20);
// 1020

Best Practices

Use consistent quotation style throughout a project.
Follow the project formatter or linting configuration.
Use template literals for dynamic strings.
Use template literals for readable multiline content.
Prefer primitive strings over String objects.
Avoid new String().
Use strict equality when comparing strings.
Remember that string indexes begin at zero.
Use length - 1 for the final normal index.
Use at(-1) when accessing the final character.
Remember that strings are immutable.
Store the return value of string transformations.
Use const for string variables that are not reassigned.
Use let only when the variable must receive a new string.
Trim user input before validation when surrounding whitespace is irrelevant.
Normalize letter case for case-insensitive comparisons.
Use includes() for clear existence checks.
Use startsWith() for prefixes.
Use endsWith() for suffixes and file extensions.
Use indexOf() when the matching position is required.
Use slice() for most string extraction tasks.
Avoid legacy substr().
Use replaceAll() when every literal occurrence must be replaced.
Use regular expressions only when pattern matching is genuinely required.
Keep regular expressions readable and documented when complex.
Use split() to convert structured text into arrays.
Use join() to combine array values into strings.
Use explicit String() conversion when intent should be obvious.
Be careful when combining strings and numbers with +.
Use JSON.stringify() for structured object serialization.
Handle empty strings in reusable utility functions.
Consider Unicode when processing international text.
Use for...of or spread syntax for many code-point-aware operations.
Do not assume length equals visible character count.
Use locale-aware comparison when sorting human-language text.
Validate input before applying transformations that assume a format.
Avoid unnecessarily long chains of string methods.
Break complex transformations into named steps.
Use descriptive names such as normalizedEmail or trimmedInput.
Keep original data when destructive-looking transformations may need to be reversed.
Test string utilities with empty values.
Test string utilities with spaces.
Test string utilities with uppercase and lowercase text.
Test string utilities with Unicode characters.
Test string utilities with emojis when relevant.
Never rely only on frontend string validation for security.
Escape or sanitize untrusted content before inserting it into HTML.
Use textContent instead of innerHTML when displaying plain user text.
Keep string-processing functions small and focused.
Prefer clear code over clever one-line transformations.

Well-Structured String Processing

function normalizeEmail(email) {
    return email
        .trim()
        .toLowerCase();
}


function createUserSlug(name) {
    return name
        .trim()
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
}


function createGreeting(name) {
    const cleanedName =
        name.trim();

    if (cleanedName === '') {
        return 'Welcome!';
    }

    return `Welcome, ${cleanedName}!`;
}


const email =
    normalizeEmail(
        '  USER@EXAMPLE.COM  '
    );

const slug =
    createUserSlug(
        'Aarav Sharma'
    );

const greeting =
    createGreeting('Aarav');


console.log(email);
console.log(slug);
console.log(greeting);

Output

Frequently Asked Questions

What is a string in JavaScript?

A string is a sequence of characters used to represent textual data.

How can I create a string?

You can use single quotes, double quotes, or backticks.

What is the difference between single and double quotes?

They create the same type of primitive string. The difference is mainly syntax and project style.

What are template literals?

Template literals are strings created with backticks that support interpolation, expressions, and multiline text.

How do I insert a variable into a template literal?

Use ${expression} inside a backtick string.

Can template literals contain expressions?

Yes. Any valid JavaScript expression can be evaluated inside ${}.

Should I use new String()?

Usually no. It creates a String object instead of a primitive string and can cause confusing behavior.

What does String() do?

String() converts a value into a primitive string.

What is an empty string?

An empty string contains zero characters and is written as two quotes or backticks with nothing between them.

Is an empty string truthy or falsy?

An empty string is falsy.

How do I find the length of a string?

Use the length property.

Do spaces count in string length?

Yes. Spaces are characters and contribute to the length.

What index does a JavaScript string begin with?

String indexes begin at 0.

What is the final valid index of a normal string?

The final index is string.length - 1.

How do I access a character?

Use bracket notation, charAt(), or at().

What does bracket notation return for an invalid index?

It returns undefined.

What does charAt() return for an invalid index?

It returns an empty string.

What is special about at()?

It supports negative indexes, making it easy to access characters from the end.

How do I get the last character of a string?

Use string.at(-1) or string[string.length - 1].

Are JavaScript strings mutable?

No. Strings are immutable.

What does string immutability mean?

Individual characters in an existing string cannot be changed directly.

Do string methods modify the original string?

Most string methods return a new string and leave the original unchanged.

What is an escape sequence?

An escape sequence represents special characters such as newlines, tabs, quotes, and backslashes.

How do I create a newline in a normal string?

Use the \n escape sequence.

How do I create multiline text?

Template literals are usually the clearest approach.

What is string concatenation?

Concatenation means combining multiple strings into one.

How can I concatenate strings?

Use the + operator, += operator, concat(), or template literals.

Which is better for dynamic strings?

Template literals are usually more readable than complex concatenation.

Are string comparisons case-sensitive?

Yes. JavaScript compares uppercase and lowercase letters as different characters.

How do I compare strings without case sensitivity?

Convert both strings to the same case before comparing them.

What does localeCompare() do?

It performs locale-aware string comparison useful for sorting human-language text.

How do I convert text to uppercase?

Use toUpperCase().

How do I convert text to lowercase?

Use toLowerCase().

How do I find text inside a string?

Use methods such as indexOf(), includes(), search(), or lastIndexOf().

What does indexOf() return when no match exists?

It returns -1.

What does includes() return?

It returns true or false.

How do I check the beginning of a string?

Use startsWith().

How do I check the end of a string?

Use endsWith().

How do I extract part of a string?

Use slice() or substring().

Does slice() support negative indexes?

Yes.

Does substring() support negative indexes?

No. Negative values are treated as 0.

Should I use substr()?

Avoid it in new code because it is a legacy method.

Does replace() replace every occurrence?

Not when given a normal string search value. It replaces the first matching occurrence.

How do I replace every occurrence?

Use replaceAll() or an appropriate global regular expression.

How do I remove surrounding spaces?

Use trim().

What does trimStart() do?

It removes whitespace from the beginning of a string.

What does trimEnd() do?

It removes whitespace from the end of a string.

How do I add characters to the beginning of a string?

Use padStart().

How do I add characters to the end of a string?

Use padEnd().

How do I repeat a string?

Use repeat().

How do I convert a string into an array?

Use split() or spread syntax depending on the desired result.

How do I convert an array into a string?

Use join().

How do I convert a number into a string?

Use String(number) or number.toString().

What happens when I add a number to a string?

The + operator usually performs string concatenation.

How do I convert an object to structured text?

Use JSON.stringify() when JSON representation is appropriate.

Can I loop through a string?

Yes. Use a for loop or for...of loop.

Can I spread a string?

Yes. Spread syntax can expand many strings into an array of Unicode code points.

Why can an emoji have length 2?

Some emojis require two UTF-16 code units.

Does length always equal visible character count?

No. Unicode and complex emoji sequences can make visible character counting more complicated.

What does codePointAt() do?

It returns the Unicode code point beginning at a specified position.

What does String.fromCodePoint() do?

It creates a string from one or more Unicode code points.

What is String.raw?

It returns the raw form of a template literal and preserves backslashes.

What is a tagged template?

It is a template literal processed by a function.

How do I capitalize the first letter?

Combine the uppercase first character with the remainder of the string.

How do I reverse a string?

A common approach is to convert it to an array, reverse the array, and join it again.

How do I count words?

Trim the text and split it using a whitespace pattern.

What is a palindrome?

A palindrome is text that reads the same forward and backward after appropriate normalization.

What is a slug?

A slug is a URL-friendly text value commonly created from a title.

How do I mask sensitive text?

Keep only the required visible portion and replace the remaining characters with masking symbols.

How do I truncate long text?

Check the length, extract the required portion with slice(), and append an ellipsis when necessary.

Key Takeaways

Strings represent textual data.
Strings can use single quotes, double quotes, or backticks.
Template literals support interpolation and multiline text.
Primitive strings should usually be preferred over String objects.
The length property returns the number of UTF-16 code units.
String indexes begin at zero.
The final normal index is length - 1.
Bracket notation accesses characters by index.
charAt() returns a character at a specified position.
at() supports negative indexes.
Strings are immutable.
String methods usually return new strings.
Escape sequences represent special characters.
The + operator can concatenate strings.
Template literals simplify dynamic string creation.
String comparisons are case-sensitive.
Case normalization enables case-insensitive comparisons.
localeCompare() supports locale-aware comparison.
toUpperCase() converts text to uppercase.
toLowerCase() converts text to lowercase.
indexOf() returns a matching position or -1.
includes() returns true or false.
startsWith() checks prefixes.
endsWith() checks suffixes.
slice() extracts part of a string.
substring() is similar but does not support negative indexes.
substr() should be avoided in new code.
replace() replaces matching text.
replaceAll() replaces every matching occurrence.
trim() removes surrounding whitespace.
padStart() and padEnd() add padding.
repeat() repeats a string.
split() converts strings into arrays.
join() combines arrays into strings.
String() explicitly converts values to strings.
The + operator can cause unexpected string coercion.
for and for...of can iterate through strings.
Unicode can make string length more complex.
Some emojis use multiple UTF-16 code units.
String utility functions are common in real applications.
Text should be cleaned before validation.
User-generated content must be handled safely before HTML insertion.

Summary

Strings are sequences of characters used to represent text. They are one of the most important and frequently used data types in JavaScript.

JavaScript strings can be created with single quotes, double quotes, or template literals. Template literals are especially useful for dynamic content, expressions, and multiline text.

Characters can be accessed using indexes, bracket notation, charAt(), and at(). Strings are immutable, so methods and transformations create new string values instead of changing the original characters directly.

JavaScript provides methods for changing case, searching, extracting, replacing, trimming, padding, repeating, splitting, comparing, and converting strings.

Strings can also be iterated, converted into arrays, processed with regular expressions, and used to build practical features such as search systems, slugs, text previews, validation, masking, and text analysis.

Understanding Unicode is important because the length property counts UTF-16 code units rather than always counting visible characters exactly.

Mastering strings gives you the ability to process user input, format application content, validate text, generate dynamic interfaces, and solve many real-world programming problems.

Lesson 16 Completed

You understand what JavaScript strings are.
You can create strings using different syntaxes.
You understand template literals.
You understand primitive strings and String objects.
You can find string length.
You can access individual characters.
You understand bracket notation.
You can use charAt().
You can use at().
You understand string immutability.
You can use escape sequences.
You can create multiline strings.
You can concatenate strings.
You can use template interpolation.
You can compare strings.
You can perform case-insensitive comparisons.
You can change string case.
You can search inside strings.
You can extract parts of strings.
You can replace text.
You can remove whitespace.
You can pad and repeat strings.
You can split strings into arrays.
You can convert values into strings.
You can iterate through strings.
You understand basic Unicode behavior.
You understand emoji length differences.
You can capitalize text.
You can reverse strings.
You can count characters and words.
You can check palindromes.
You can generate URL slugs.
You can mask sensitive text.
You can truncate long text.
You can build a complete text analyzer.
You are ready to learn JavaScript Arrays.

Next Lesson →