Working with Strings

Data Type Recap - What Is a String Again?

A string is a sequence of characters used to represent text. Strings are enclosed in single quotes ('...') or double quotes ("..."). They can include letters, numbers, symbols, and even spaces.

let greeting = "Hello, world!";
console.log(greeting);  // prints: Hello, world!

There is a lot more that can be done with strings than just printing them out. Let's cover some of the more common use cases here.

Common String Operations

Concatenation

Concatenation means joining two or more strings together. In JavaScript, this can be done using the + operator.

Example:

let firstName = "Alice";
let lastName = "Smith";
let fullName = firstName + " " + lastName;
console.log(fullName);  // prints: Alice Smith

Length Property

Every string has a length property that tells you the number of characters in the string.

Example:

let message = "Hello, world!";
console.log(message.length);  // prints: 13

toUpperCase() and toLowerCase()

These methods convert a string into uppercase or lowercase characters respectively.

Example:

let lower = "hello";
console.log(lower.toUpperCase());  // prints: HELLO

let upper = "WORLD";
console.log(upper.toLowerCase());  // prints: world

trim()

The trim() method removes any leading and trailing whitespace from a string.

Example:

let messy = "   lots of space   ";
console.log(messy.trim());  // prints: "lots of space"

slice()

JavaScript’s slice method returns a portion of a string (or array) without modifying the original value. It takes two arguments: a start index and an optional end index. If the end index is omitted, slicing continues to the end. Negative indexes count from the end of the string.

const text = "JavaScript";

// Only start index: slice from index 4 to the end
console.log(text.slice(4));    
// "Script"

// Start and end index: slice from 0 to 4 (not including 4)
console.log(text.slice(0, 4));  
// "Java"

// Negative start index: count from the end
console.log(text.slice(-6));    
// "Script"

// Both indices negative: slice a portion from the end
console.log(text.slice(-6, -3)); 
// "Scr"

indexOf()

The indexOf() method returns the position of the first occurrence of a specified value in a string, or -1 if it is not found.

Example:

let phrase = "Hello, world!";
console.log(phrase.indexOf("world"));  // prints: 7

Template Literals

What Are Template Literals?

Template literals are a new way to create strings in JavaScript using backticks instead of single or double quotes. With template literals, you can:

• Create multi-line strings without escape characters.
• Easily insert variables and expressions into a string using the ${ ... } syntax.
• Write more readable string expressions without the need for cumbersome concatenation.

Basic Template Literal Syntax

Instead of writing strings with quotes, you enclose them with backticks (`). Within these backticks, you can insert expressions by wrapping them with ${ }.

Example:

let name = "Alice";
let greeting = `Hello, ${name}!`; // The variable 'name' is interpolated into the string.
console.log(greeting); // prints: "Hello, Alice!"

In this example:

• The string is defined using backticks.
• The ${name} syntax tells JavaScript to evaluate the expression inside the curly braces and insert its value into the string.

Advantages of Template Literals

Simpler String Interpolation

Rather than using concatenation with the + operator (e.g., "Hello, " + name + "!"), template literals allow you to embed expressions directly.

Multi-line Support

With template literals, you don’t need to use newline escape characters (\n) to create multi-line strings.

Example:

let multiLine = `This is a string
that spans across
multiple lines.`;
console.log(multiLine);

Exercises