Strings and String Methods

Text is everywhere in a web application: tour names, descriptions, button labels, error messages. In JavaScript, any piece of text is a string.

String syntax

A string is a sequence of characters wrapped in quotes. JavaScript accepts three styles:

const a = 'single quotes';
const b = "double quotes";
const c = `backticks`;

Single and double quotes are interchangeable — pick one and be consistent. Backticks are template literals, covered in the next lesson. They have extra powers: for now, treat them as a third quoting style.

The only rule: the closing quote must match the opening quote.

const bad = 'mismatched";  // SyntaxError

To include a quote character inside the string, either use the other quote style or escape with a backslash:

const a = "It's a great hike.";       // outer double, inner single — fine
const b = 'It\'s a great hike.';      // escaped single quote — also fine

.length

Every string has a .length property that returns the number of characters:

const tourName = 'Cascade Ridge Hike';
console.log(tourName.length);  // 18

.length is a property, not a method — no parentheses.

.toUpperCase() and .toLowerCase()

Convert a string’s case:

console.log(tourName.toUpperCase());  // 'CASCADE RIDGE HIKE'
console.log(tourName.toLowerCase());  // 'cascade ridge hike'

Strings in JavaScript are immutable — these methods return a new string; they do not change tourName.

.includes()

Check whether a string contains a specific substring. Returns true or false:

console.log(tourName.includes('Ridge'));  // true
console.log(tourName.includes('Valley')); // false

Case-sensitive — 'ridge' and 'Ridge' are different.

.indexOf()

Find the position of a substring. Returns the index of the first character, or -1 if not found:

console.log(tourName.indexOf('Ridge'));  // 8
console.log(tourName.indexOf('Valley')); // -1

Indexes start at zero — the first character of 'Cascade Ridge Hike' is at position 0.

.slice()

Extract part of a string. Takes a start index and an optional end index (exclusive):

console.log(tourName.slice(0, 7));   // 'Cascade'
console.log(tourName.slice(8));      // 'Ridge Hike'
console.log(tourName.slice(-4));     // 'Hike'

Negative indexes count from the end. .slice(-4) means “the last four characters.”

.trim()

Remove whitespace from both ends of a string:

const raw = '  Cascade Ridge Hike  ';
console.log(raw.trim());  // 'Cascade Ridge Hike'

Essential when handling user input — people accidentally add spaces, and .trim() cleans it up before you use or store the value.

Concatenation

You can join strings with the + operator:

const label = 'Tour: ' + tourName + ' — $' + tourPrice;
console.log(label);  // 'Tour: Cascade Ridge Hike — $149'

This works, but it gets hard to read once there are more than two or three pieces. Template literals, covered in the next lesson, solve that problem cleanly.

Exercise

Using the tourName variable from the previous lesson ('Cascade Ridge Hike'), log the result of each method:

const tourName = 'Cascade Ridge Hike';

console.log(tourName.length);
console.log(tourName.toUpperCase());
console.log(tourName.includes('Ridge'));
console.log(tourName.indexOf('Ridge'));
console.log(tourName.slice(0, 7));
console.log(tourName.trim());

Then create a new variable with extra whitespace — ' Summit Loop Trek ' — and log it before and after .trim() to see the difference.

Recap

• Strings are sequences of characters wrapped in single quotes, double quotes, or backticks. Be consistent.
• .length returns the number of characters (no parentheses — it is a property, not a method).
• .toUpperCase() and .toLowerCase() return new strings with changed case. The original is unchanged.
• .includes() returns true or false; .indexOf() returns the position or -1.
• .slice(start, end) extracts a portion. Negative indexes count from the end.
• .trim() removes leading and trailing whitespace — use it on user input.
• Concatenation with + joins strings; template literals (next lesson) are the cleaner alternative.