JavaScript Strings — Complete Guide

Phase 5 — Strings

Module 11 — JavaScript Strings Fundamentals

Strings are one of the most important data types in JavaScript. Almost every application works with text:

• Usernames
• Passwords
• Emails
• Search
• URLs
• API Responses
• JSON
• Chat Applications
• AI Applications
• Markdown Editors
• Rich Text Editors
• IDEs

If arrays are the backbone of data collections, strings are the backbone of text processing.

What is a String?

A string is a sequence of characters used to represent text.

javascriptCopy
1const language = "JavaScript";

A string can contain:

• Letters
• Numbers
• Symbols
• Spaces
• Emojis
• Unicode Characters

Example

javascriptCopy
1const name = "Ankit";
2
3const message = "Hello World";
4
5const emoji = "🚀";
6
7const hindi = "नमस्ते";

Creating Strings

Double Quotes

javascriptCopy
1const language = "JavaScript";

Single Quotes

javascriptCopy
1const language = 'JavaScript';

Backticks (Template Literals)

javascriptCopy
1const language = `JavaScript`;

Backticks support

• Multiline strings
• Variable interpolation
• Expressions

String Length

javascriptCopy
1const text = "JavaScript";
2
3console.log(text.length);

Output

textCopy
110

String Indexing

Each character has an index.

textCopy
1J  a  v  a  S  c  r  i  p  t
2
30  1  2  3  4  5  6  7  8  9

Access characters

javascriptCopy
1const text = "JavaScript";
2
3console.log(text[0]);
4
5console.log(text[4]);
6
7console.log(text[9]);

Output

textCopy
1J
2S
3t

Using at()

javascriptCopy
1const text = "JavaScript";
2
3console.log(text.at(0));
4
5console.log(text.at(-1));

Output

textCopy
1J
2
3t

String is Immutable

Strings cannot be modified.

Wrong

javascriptCopy
1let text = "JavaScript";
2
3text[0] = "P";
4
5console.log(text);

Output

textCopy
1JavaScript

Nothing changes.

Correct

javascriptCopy
1let text = "JavaScript";
2
3text = "TypeScript";

Multiline Strings

Old Way

javascriptCopy
1const message =
2"Hello\nWelcome\nJavaScript";

Output

textCopy
1Hello
2Welcome
3JavaScript

Modern Way

javascriptCopy
1const message = `
2
3Hello
4
5Welcome
6
7JavaScript
8
9`;

Escape Characters

Example

javascriptCopy
1console.log("Hello\nWorld");

Output

textCopy
1Hello
2World

Unicode

JavaScript supports Unicode.

javascriptCopy
1const hindi = "नमस्ते";
2
3const chinese = "你好";
4
5const arabic = "مرحبا";

Emojis

javascriptCopy
1const emoji = "😊";
2
3console.log(emoji);

Template Literals

Without Template Literals

javascriptCopy
1const name = "Ankit";
2
3const age = 23;
4
5console.log(
6
7name + " is " + age + " years old."
8
9);

Modern Way

javascriptCopy
1const name = "Ankit";
2
3const age = 23;
4
5console.log(
6
7`${name} is ${age} years old.`
8
9);

Output

textCopy
1Ankit is 23 years old.

Expressions Inside Strings

javascriptCopy
1const a = 10;
2
3const b = 20;
4
5console.log(
6
7`${a} + ${b} = ${a+b}`
8
9);

Output

textCopy
110 + 20 = 30

Nested Template Literals

javascriptCopy
1const user = {
2
3name:"Ankit",
4
5age:23
6
7};
8
9console.log(
10
11`${user.name} (${user.age})`
12
13);

Raw Strings

javascriptCopy
1String.raw`C:\Users\Ankit`;

Output

textCopy
1C:\Users\Ankit

Character Iteration

javascriptCopy
1const word = "Java";
2
3for(const letter of word){
4
5console.log(letter);
6
7}

Output

textCopy
1J
2
3a
4
5v
6
7a

Convert String to Array

javascriptCopy
1const word = "Java";
2
3console.log(
4
5[...word]
6
7);

Output

textCopy
1["J","a","v","a"]

Compare Strings

javascriptCopy
1console.log(
2
3"apple" === "apple"
4
5);

Output

textCopy
1true

Case Sensitive

javascriptCopy
1console.log(
2
3"Apple" === "apple"
4
5);

Output

textCopy
1false

Common Mistakes

Using ==

javascriptCopy
1"Java" == "Java";

Better

javascriptCopy
1"Java" === "Java";

Forgetting Strings are Immutable

Wrong

javascriptCopy
1text[0] = "A";

Mixing Quotes

Wrong

javascriptCopy
1const name = "Ankit';

Syntax Error

Performance

Best Practices

• Prefer template literals over string concatenation.
• Use backticks for multiline text.
• Use === for string comparisons.
• Remember that strings are immutable.
• Use at() for cleaner access to the last character.
• Keep strings in UTF-8/Unicode to support international users.
• Avoid repeatedly concatenating large strings inside loops; use arrays with join() when building long text.

Mini Project — User Profile Card

index.html

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>User Profile</title>
5</head>
6<body>
7
8<div id="profile"></div>
9
10<script src="script.js"></script>
11
12</body>
13</html>

script.js

javascriptCopy
1const user = {
2
3name: "Ankit",
4
5role: "Frontend Developer",
6
7country: "India"
8
9};
10
11const profile = `
12
13<h2>${user.name}</h2>
14
15<p>${user.role}</p>
16
17<p>${user.country}</p>
18
19`;
20
21document.getElementById("profile").innerHTML = profile;

Interview Questions

Q1. Are JavaScript strings mutable?

No. Strings are immutable. Any operation that appears to modify a string actually creates a new string.

Q2. What is the advantage of template literals?

They support variable interpolation, multiline strings, and embedded JavaScript expressions, making code more readable than string concatenation.

Q3. What is the difference between text[0] and text.at(0)?

Both access characters by index, but at() also supports negative indexes such as text.at(-1) to access the last character.

Q4. Why should you prefer template literals over concatenation?

They improve readability, reduce syntax errors, and make embedding variables and expressions straightforward.