Work With Strings in JavaScript I

In JavaScript, a string literal, string of characters, or simply string, is a primitive data type that represents a sequence of individual characters, such as letters, digits, symbols, or spaces, enclosed in single quotes '', double quotes "", or backticks ``.

It is used for storing textual information, text manipulation, and representing data in a human-readable format.

Access individual characters

To access the individual character of a string, you can use the square brackets syntax []:

string[index]

Where:

• string is a string of characters.
• index is the index (or position) of the character you want to access within the string. It can either be a user-defined number or a variable containing a computed number.

Notes:

• The index of the first character in a string is 0.
• When accessing an "out of bounds" index, the expression will result in undefined.

Example

Let's consider this script, that outputs all the characters of a string individually:

const word = "Hello";

console.log(word[0]);
console.log(word[1]);
console.log(word[2]);
console.log(word[3]);
console.log(word[4]);

Which will produce this output:

H
e
l
l
o

Concatenate strings

To concatenate (or join) two or more strings together into a single one without a separator, you can use the + operator as follows:

const string = 'string' + 'string';

Note: When concatenating a string with any other value, such as null, undefined, true, numbers, etc, these values will be automatically coerced into strings.

For example, this will output the string 'Hello null':

console.log('Hello ' + null);

Example

Let's consider this script:

const firstName = 'John';
const lastName = 'Doe';
const age = 34;

const introduction = 'Hi! My name is ' + firstName + ' ' + lastName + ', I am ' + age + ' years old.';

console.log(introduction);

When executed, it will concatenate the firstName, lastName, and age variables, plus additional string literals, using the + operator.

Which will produce this output:

Hi! My name is John Doe, I am 34 years old.

Template literals

Template literals are string literals delimited with backtick characters ``:

const template = `expression`;

They allow you to create string literals, but also multiline strings, perform string interpolation expressions, and use special constructs called tagged templates.

Multiline strings

Backticks allow you to create multiline strings without explicitly using the newline escape character \n:

const string = `word
word`;

💡 Tip: Just like in the shell, you can prevent the addition of a newline character by placing a backslash character \ at the end of a line:

const string = `word \
word`;

Example

Let's consider this script:

const stringA = 'This is a string\nthat spans on\nmultiple lines.'

const stringB = `This is a string
that spans on
multiple lines.`;

console.log(stringA === stringB);

When executed, it will create two variables stringA and stringB that both contain the exact same characters, simply written in two different forms.

Which will produce this output:

true

String interpolation

String interpolation refers to the process of embedding expressions, variables, or values directly into a string, allowing the string to dynamically include data.

When using template literals, you can embed these placeholders using the ${} syntax:

const string = `${placeholder}`;

💡 Tip: You can prevent string interpolation by escaping the ${} expression with a backslash character \:

const string = `\${placeholder}`;

Example

Let's consider this script:

const a = 5;
const b = 10;

const result = `The sum of ${a} + ${b} is ${a + b}.`;

console.log(result);

When executed, it will use string interpolation to include the value of the a and b variables, as well as the value returned by the call to the sum() function into the result variable.

Which will produce this output:

The sum of 5 + 10 is 15.

Summary

Here's a summary of what you've learned in this lesson:

• The string[index] syntax is used to access an individual character of a string.
• The string + string syntax is used to join two or more strings.
• The backticks `` are used to declare template literals.
• The ${} expression is used to include placeholders into a template literal.