JavaScript · Lesson 15 / 32 · English

JavaScript Strings

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

Read this lesson in தமிழ் ↗.

01 / Understand

Start with the idea

Strings hold text. Methods such as trim and toUpperCase return new strings rather than modifying the original value.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

Strings in JavaScript

Strings are sequences of characters. JavaScript strings are immutable — string methods always return a new string.

String Creation

JavaScript reference fragmentCODE

const single = 'Hello';
const double = "World";
const template = `Hello, ${"World"}!`; // Template literal (ES6)

// Multi-line string with template literal
const html = `
  <div>
    <h1>Title</h1>
  </div>
`;

// String properties
console.log("Hello".length); // 5

Common String Methods

JavaScript reference fragmentCODE

const str = "  Hello, World!  ";

// Case
str.toUpperCase();      // "  HELLO, WORLD!  "
str.toLowerCase();      // "  hello, world!  "

// Trimming
str.trim();             // "Hello, World!"
str.trimStart();        // "Hello, World!  "
str.trimEnd();          // "  Hello, World!"

// Searching
str.includes("World");  // true
str.startsWith("  He"); // true
str.endsWith("  ");     // true
str.indexOf("o");       // 5
str.lastIndexOf("o");   // 9

// Extracting
str.slice(2, 7);         // "Hello"
str.substring(2, 7);     // "Hello"
str.at(-3);              // "!"

// Replacing
str.replace("World", "JS");         // replaces first match
str.replaceAll("l", "L");           // replaces all
"a-b-c".split("-");                 // ["a", "b", "c"]

// Padding and Repeating
"5".padStart(3, "0");  // "005"
"ha".repeat(3);         // "hahaha"

Template Literals

JavaScript reference fragmentCODE

const name = "Alice";
const age = 30;

// Expression interpolation
const msg = `My name is ${name} and I am ${age} years old.`;

// Expression evaluation
console.log(`2 + 2 = ${2 + 2}`);
console.log(`Is adult: ${age >= 18 ? 'Yes' : 'No'}`);

// Tagged template literals
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    result + str + (values[i] ? `<b>${values[i]}</b>` : ''), '');
}
const output = highlight`Hello ${name}, you are ${age} years old!`;
// "Hello <b>Alice</b>, you are <b>30</b> years old!"

03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const raw = "  coding tamilan  ";
const clean = raw.trim();
console.log(clean.toUpperCase());
console.log(clean.includes("tamil"));

Predict first. Reveal the expected result.

CODING TAMILAN
true

04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Replace tamil with JavaScript in clean and print the result.

Reveal the answer and reasoning

clean.replace("tamil", "JavaScript") produces "coding JavaScriptan" because replace matches the substring. Choose whole-word logic when that is the requirement.

One mistake to avoid: String comparisons are case-sensitive. toUpperCase returns a value; it does not update the existing binding.

Your learning checkpoint

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.