Strings and template literals

Your phone shows the message “Hi, Aysel! You have 3 new messages”. The program doesn't store this sentence ready-made — it builds it from pieces: fixed words, the user's name and the number of messages. Working with text is one of the most common jobs in programming.

Creating strings

A string is a sequence of characters. You can write it in single quotes, double quotes or between backticks. Single and double quotes work the same; the only rule is that the opening and closing quote must match. Inside a string the \ sign is used for special characters: \n means a new line and \' means a quote character.

const single = 'Hello';
const double = "Hello";
const quote = 'It\'s JavaScript';

console.log(single, double);
console.log(quote);
console.log('Line 1\nLine 2');

Hello Hello
It's JavaScript
Line 1
Line 2

Length and indexes

The length property tells you how many characters a string has. Each character has its own number — an index — and counting starts from 0. So in 'Baku' the B is at index 0 and the u at index 3. You can also get the last character with at(-1).

const city = 'Baku';

console.log(city.length);
console.log(city[0]);
console.log(city[city.length - 1]);
console.log(city.at(-1));
console.log(city.toUpperCase());
console.log(city.toLowerCase());

4
B
u
u
BAKU
baku

Useful methods

A method is a function “attached” to a value, and you call it with a dot: city.toUpperCase(). Strings have many methods, but the ones below cover most everyday tasks.

const email = '  Leyla.Mammadova@Example.com  ';
const clean = email.trim().toLowerCase();

console.log(clean);
console.log(clean.includes('@'));
console.log(clean.indexOf('@'));
console.log(clean.slice(0, clean.indexOf('@')));
console.log(clean.endsWith('.com'));

leyla.mammadova@example.com
true
15
leyla.mammadova
true

const sentence = 'I love JavaScript';

console.log(sentence.replace('love', 'enjoy'));
console.log(sentence.split(' '));
console.log('ha'.repeat(3));
console.log('7'.padStart(3, '0'));
console.log(sentence);

I enjoy JavaScript
[ 'I', 'love', 'JavaScript' ]
hahaha
007
I love JavaScript

Template literals

Gluing text together piece by piece with + is tiring, and it's easy to forget a space. Template literals make it easier. They are written between backticks — on a US English keyboard this key is right below Esc. When you write ${...} inside, the value of the expression in the braces is put into the text.

const name = 'Aysel';
const messages = 3;

console.log('Hi, ' + name + '! You have ' + messages + ' new messages.');
console.log(`Hi, ${name}! You have ${messages} new messages.`);

Hi, Aysel! You have 3 new messages.
Hi, Aysel! You have 3 new messages.

Inside ${...} you can put any expression, not just a variable: a calculation or a method call. Template literals can also span several lines — no need to write \n. The toFixed(2) method shows a number with two digits after the decimal point.

const item = 'bread';
const price = 0.8;
const quantity = 5;

console.log(`Total: ${price * quantity} AZN`);

const receipt = `Item: ${item.toUpperCase()}
Quantity: ${quantity}
Sum: ${(price * quantity).toFixed(2)} AZN`;
console.log(receipt);

Total: 4 AZN
Item: BREAD
Quantity: 5
Sum: 4.00 AZN

const name = 'Elvin';

console.log('Hi, ${name}');
console.log(`Hi, ${name}`);

Hi, ${name}
Hi, Elvin

Practice: building a username

Let's combine what we have learned. We build a username from a full name: split(' ') separates the first and last name, toLowerCase() makes the letters small, and a template literal joins the parts with a dot. Try the code with your own name.

const fullName = 'Murad Aliyev';
const parts = fullName.split(' ');
const login = `${parts[0].toLowerCase()}.${parts[1].toLowerCase()}`;

console.log(parts);
console.log(login);
console.log(`Welcome, ${parts[0]}! Your login is ${login}`);

[ 'Murad', 'Aliyev' ]
murad.aliyev
Welcome, Murad! Your login is murad.aliyev

const rawName = '  Leyla HASANOVA ';
const year = 2012;
// 1) build and print the login leyla.hasanova12
// 2) print Login length: N

leyla.hasanova12
Login length: 16