Data Type Recap - What Is a String Again?

 is a sequence of characters used to represent text. Strings are enclosed in single quotes (

). They can include letters, numbers, symbols, and even spaces.

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.

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

 property that tells you the number of characters in the string.

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

 method removes any leading and trailing whitespace from a string.

 method returns a portion of a string (or array) without modifying the original value. It takes two arguments: a 

. If the end index is omitted, slicing continues to the end. Negative indexes count from the end of the string.

 method returns the position of the first occurrence of a specified value in a string, or 

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 

Write more readable string expressions without the need for cumbersome concatenation.

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

 syntax tells JavaScript to evaluate the expression inside the curly braces and insert its value into the string.

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

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

 and assign it the value "Hello, world!".

Print the message and its length using console.log.

index.js

index.test.js

Create and Print a String with Its Length

Convert the string to uppercase using toUpperCase(), and print the result.

Convert the same string to lowercase using toLowerCase(), and print the result.

Convert String Case

 (with extra spaces at the beginning and end; the exact number of spaces is not critical).

Trim and Concatenate Strings

Extract a Substring Using slice()

 into a sentence (for example: "Hello, Joe!").

Create a Greeting Message

 that uses a template literal to include a multi-line string.

Your message should include at least three lines.

Create a Multi-line Message

## 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.

```javascript
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:

```javascript
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: 

```javascript
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:

```javascript
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:**

```javascript
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.

```javascript
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:**

```javascript
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:**

```javascript
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: **

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

---

## Exercises

@exercise d248fb96f3ba

@exercise fb3a505b8dd6

@exercise e3d6dbe9cd62

@exercise 425d9a7c608b

@exercise 4e9efe301264

@exercise 5f7cc3f768f7


- Luo muuttuja nimeltä **message** ja anna sille arvoksi "Hei, maailma!".
- Tulosta viesti ja sen pituus käyttäen console.logia.

Luo ja tulosta merkkijono sen pituuden kanssa

- Luo muuttuja nimeltä **name** ja anna sille arvoksi "Alice".
- Muuttamatta itse name muuttujan arvoa, tulosta sen arvo isoina kirjaimina käyttäen **toUpperCase()**-funktiota.
- Ja samalla tavalla tulosta muuttuja pienillä kirjaimilla käyttäen toLowerCase()-funktiota.

Muuta merkkijonon kirjainkoko

- Luo muuttuja nimeltään **fullText** ja anna sille arvoksi **" Hello "** (ylimääräisillä välilyönneillä alussa ja lopussa; tarkka määrä välilyöntejä ei ole oleellinen).
- Luo toinen muuttuja nimeltään **trimmedText**, joka pitää sisällään **fullText**-muuttujan trimmatun version **trim()**-funktiota käyttäen.
- Tulosta **trimmedText** käyttäen **console.log**-funktiota.

Trimmaa merkkijono

- Määritä muuttuja **message** arvolla **"Hello, JavaScript World!"**.
- Käytä **slice()**-metodia poimiaksesi alimerkkijonon **"JavaScript"**, ja tallenna se muuttujaan **substring**.
- Tulosta se konsoliin.

Alimerkkijonon poiminta slice()-metodilla

- Luo muuttuja nimeltä **nimi** ja anna sille arvoksi joku nimi, vaikka "Jaska".
- Luo toinen muuttuja **tervehdys** käyttäen template stringiä, joka lisää **nimen** lauseeseen (esimerkiksi: "Hei, Jaska!").
- Tulosta **tervehdys** käyttäen console.log.

Luo tervehdysviesti

- Luo muuttuja nimeltään **viesti**, joka käyttää mallipohjaan sisällytettyä monirivistä merkkijonoa.
- Viestisi tulisi sisältää vähintään kolme riviä.
- Tulosta viesti käyttäen console.logia.

Luo monirivinen viesti

Working with Strings

Learn programming with JavaScript, arguably the most important and versatile programming language in today's world, at least for web development.

Welcome to Hakatemia’s beginner-friendly JavaScript course, where you will learn the fundamentals of programming with JavaScript. In today’s world, JavaScript is one of the most popular and versatile programming languages—especially in web development, where it holds a unique position: no other programming language can run both in the browser and on the server. For this reason, JavaScript has become extremely popular and is used for developing user interfaces (React, Vue, Angular, Svelte, etc.), back-end systems (NodeJS/Express, HAPI, etc.), and full-stack solutions (NextJS, NuxtJS, etc.).

These JavaScript frameworks will be covered in later Hakatemia courses, but before we get there, we must first master the basics of JavaScript programming. This course is designed precisely for that purpose.

Throughout the course, you’ll learn core programming concepts such as variables, operators, conditional statements, functions, arrays, and objects. Each module is divided into small, manageable segments with plenty of practical exercises.

This course is being released as a beta—the first part of Hakatemia’s comprehensive web development curriculum—and it is the first course that uses Hakatemia’s new programming exercise environment. Please provide feedback using the button at the bottom of the page or on Discord if you encounter any issues!

Working with Strings

Data Type Recap - What Is a String Again?

Learn to hack — start here