More About JavaScript Strings

In JavaScript, strings are sequences of characters used to represent text. Strings can be defined using single quotes, double quotes, or backticks (template literals). Unlike some languages, JavaScript strings are immutable.

This guide covers the basics and advanced concepts of working with strings in JavaScript, including creation, manipulation, concatenation, template literals, and common string methods.

Understanding Strings in JavaScript

A string in JavaScript is a sequence of characters enclosed in single quotes (' '), double quotes (" "), or backticks (` `). Backticks are used for template literals, allowing multi-line strings and embedded expressions.

javascript
const singleQuote = 'Hello, JavaScript!';
const doubleQuote = "Welcome to JavaScript!";
const templateLiteral = `This
is
a
multi-line
string.`;

console.log(singleQuote);
console.log(doubleQuote);
console.log(templateLiteral);

Output:

Hello, JavaScript!
Welcome to JavaScript!
This
is
a
multi-line
string.

Strings in JavaScript are immutable. This means once a string is created, its contents cannot be changed. If you need to modify a string, you must create a new one.

javascript
let str = "Hello";
str[0] = "J";  // This has no effect
console.log(str);  // Output: 'Hello'

str = "Jello";  // New string is assigned
console.log(str);  // Output: 'Jello'

As shown above, attempting to change a character in a string does nothing. You can, however, create new strings through reassignment or by using methods.

String Slicing in JavaScript

JavaScript doesn't have a slicing syntax like Python, but it offers similar functionality using the slice(), substring(), and substr() methods. These allow you to extract parts of a string based on index ranges.

1. Using slice()

The slice(start, end) method extracts characters from a string from start index up to, but not including, end. It supports negative indexing.

javascript
const text = "JavaScript Programming";

console.log(text.slice(0, 10));     // Output: 'JavaScript'
console.log(text.slice(11));        // Output: 'Programming'
console.log(text.slice(-11));       // Output: 'Programming'
console.log(text.slice(0, 10).slice(0, 5));  // Output: 'JavaS'
console.log(text.slice(-1));        // Output: 'g'

In this example:

  • slice(0, 10): Extracts characters from index 0 up to, but not including, index 10 → 'JavaScript'.
  • slice(11): Starts at index 11 and goes to the end → 'Programming'.
  • slice(-11): Negative index starts from the end, so this gets the last 11 characters → 'Programming'.
  • slice(0, 10).slice(0, 5): Slices the first 10 characters, then slices again to get the first 5 of those → 'JavaS'.
  • slice(-1): Extracts the last character of the string → 'g'.

2. Using substring()

The substring(start, end) method is similar to slice(), but it doesn’t support negative indexes.

javascript
const text = "JavaScript Programming";

console.log(text.substring(0, 10));  // Output: 'JavaScript'
console.log(text.substring(11));     // Output: 'Programming'

In this example:

  • substring(0, 10): Extracts characters from index 0 up to (but not including) index 10 → 'JavaScript'.
  • substring(11): Extracts from index 11 to the end → 'Programming'.

3. Using substr() (Legacy)

The substr(start, length) method extracts a substring starting at a specified position and continuing for a given number of characters. It is deprecated but still widely supported.

javascript
const text = "JavaScript Programming";

console.log(text.substr(0, 10));  // Output: 'JavaScript'
console.log(text.substr(11, 6));  // Output: 'Progra'

In this example:

  • substr(0, 10): Starts at index 0, returns 10 characters → 'JavaScript'.
  • substr(11, 6): Starts at index 11 and extracts 6 characters → 'Progra'.

4. Reversing a String (Workaround)

JavaScript doesn’t support slicing with a step or reverse slicing natively. However, you can reverse a string using split(), reverse(), and join():

javascript
const text = "JavaScript Programming";

const reversed = text.split('').reverse().join('');
console.log(reversed);  // Output: 'gnimmargorP tpircSavaJ'

In this example:

  • split(''): Converts the string into an array of individual characters.
  • reverse(): Reverses the array.
  • join(''): Joins the array back into a string with no separator.

String Concatenation in JavaScript

In JavaScript, string concatenation is the process of joining two or more strings to form a single string. This can be done using the + operator, +=, template literals (backticks), or the concat() method.

1. Using the + Operator

The + operator is the most common way to concatenate strings in JavaScript.

javascript
const greeting = "Hello";
const name = "Jane";
const message = greeting + " " + name;
console.log(message);  // Output: 'Hello Jane'

In this example, we combine the strings "Hello" and "Jane" with a space in between using the + operator. The result is a single string: 'Hello Jane'.

2. Using the += Operator

You can append to an existing string using the += operator.

javascript
let message = "Hello";
message += " ";
message += "World!";
console.log(message);  // Output: 'Hello World!'

Here, we start with "Hello", then append a space and the word "World!" using +=. The final value of message is 'Hello World!'.

3. Using the concat() Method

JavaScript also provides the concat() method, though it’s less commonly used than the + operator or template literals.

javascript
const str1 = "Good";
const str2 = "Morning";
const result = str1.concat(" ", str2);
console.log(result);  // Output: 'Good Morning'

In this example, we use concat() to join "Good", a space, and "Morning" into a single string: 'Good Morning'.

4. Concatenating Strings with Numbers

If you concatenate a string with a number, JavaScript automatically converts the number to a string.

javascript
const age = 30;
const message = "I am " + age + " years old.";
console.log(message);  // Output: 'I am 30 years old.'

Here, the number 30 is automatically converted into the string "30" and concatenated with the other string parts to form: 'I am 30 years old.'.

5. Concatenating an Array of Strings

To join multiple strings in an array, use the join() method.

javascript
const words = ["Hello", "there", "friend"];
const message = words.join(" ");
console.log(message);  // Output: 'Hello there friend'

The join(" ") method joins all elements of the array with a space as a separator, resulting in a complete sentence: 'Hello there friend'. This is particularly useful when dynamically building strings from lists or arrays.

Template Literals in JavaScript

Template literals, introduced in ES6, are a more powerful way to work with strings. They are defined using backticks (` `) instead of quotes and allow for:

  • Embedding variables and expressions using ${expression}
  • Creating multi-line strings without escape characters
  • Improved readability when building complex strings

1. Embedding Expressions

You can interpolate variables and expressions directly inside a string using ${...} syntax.

javascript
const name = "Charlie";
const age = 28;

const message = `My name is ${name} and I am ${age} years old.`;
console.log(message);  // Output: 'My name is Charlie and I am 28 years old.'

In the example above:

  • name: A string variable assigned the value "Charlie".
  • age: A number variable assigned the value 28.
  • message: A template literal string that includes both variables inside ${...} expressions.
  • The result of console.log(message) is the full sentence: 'My name is Charlie and I am 28 years old.'.

2. Multi-line Strings

With template literals, you can write multi-line strings without using escape characters like \\n.

javascript
const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;

console.log(poem);

This example shows how a multi-line string can be defined naturally using backticks. No special characters are required to handle line breaks.

3. Expressions Inside Template Literals

You can also embed any JavaScript expression inside a template literal — including calculations, ternary operators, and function calls.

javascript
const a = 5;
const b = 10;

const result = `${a} + ${b} = ${a + b}`;
console.log(result);  // Output: '5 + 10 = 15'

Here, we embed both variables and a computed expression (a + b) directly in the string. This results in a complete expression and its result being printed.

4. Nesting Template Literals

Template literals can be nested inside expressions, allowing for more dynamic content generation.

javascript
const user = "Jane";
const isMember = true;

const welcomeMessage = `Welcome ${user}, ${isMember ? "thanks for being a member!" : "please consider joining us!"}`;
console.log(welcomeMessage);

This example uses a ternary operator inside the template literal to conditionally render part of the string based on the value of isMember. It's a powerful way to dynamically adjust output.

Template literals greatly simplify the process of constructing strings, especially when working with variables, expressions, and multiline content. They are widely used in modern JavaScript development.

Common String Methods in JavaScript

JavaScript provides many built-in methods for working with strings. These methods allow you to search, transform, and analyze string data effectively.

1. length

The length property returns the number of characters in a string.

javascript
const message = "Hello, world!";
console.log(message.length);  // Output: 13

2. toUpperCase() and toLowerCase()

These methods convert a string to uppercase or lowercase.

javascript
const greeting = "Hello";
console.log(greeting.toUpperCase());  // Output: 'HELLO'
console.log(greeting.toLowerCase());  // Output: 'hello'

3. includes()

Checks if a substring exists within a string. Returns true or false.

javascript
const sentence = "JavaScript is awesome!";
console.log(sentence.includes("awesome"));  // true
console.log(sentence.includes("boring"));   // false

4. indexOf() and lastIndexOf()

These methods return the index of the first or last occurrence of a substring. Returns -1 if not found.

javascript
const phrase = "banana";
console.log(phrase.indexOf("a"));       // Output: 1
console.log(phrase.lastIndexOf("a"));   // Output: 5

5. trim()

Removes whitespace from both ends of a string.

javascript
const userInput = "   hello world   ";
console.log(userInput.trim());  // Output: 'hello world'

6. replace()

Replaces part of a string with another string.

javascript
const sentence = "I like cats.";
const newSentence = sentence.replace("cats", "dogs");
console.log(newSentence);  // Output: 'I like dogs.'

7. split()

Splits a string into an array of substrings based on a delimiter.

javascript
const names = "Jane,Bob,Charlie";
const nameArray = names.split(",");
console.log(nameArray);  // Output: ['Jane', 'Bob', 'Charlie']

8. startsWith() and endsWith()

These methods check whether a string begins or ends with a specific substring.

javascript
const message = "Hello, world!";
console.log(message.startsWith("Hello"));  // true
console.log(message.endsWith("!"));        // true

padStart() and padEnd()

These methods pad the start or end of a string with a specified character until it reaches a desired length.

javascript
const num = "7";

console.log(num.padStart(3, "0"));  // '007'
console.log(num.padEnd(3, "*"));    // '7**'

These methods are often used in formatting numbers, aligning content, or adding visual padding in UI strings.

These are just a few of the many string methods available in JavaScript. You can find a full list in the official MDN String Reference.

Frequently Asked Questions

What are common string methods in JavaScript?

Common JavaScript string methods include .slice(), .substring(), .toUpperCase(), .toLowerCase(), .concat(), .split(), and .trim() which allow you to manipulate strings effectively.

How do I concatenate strings in JavaScript?

You can concatenate strings using the + operator, the += operator, template literals with backticks (` `), or the .concat() method.

How do I convert a string to uppercase in JavaScript?

Use the .toUpperCase() method. For example, 'hello'.toUpperCase() returns 'HELLO'.

How do I check if a string contains a substring in JavaScript?

You can use the .includes() method. For example, 'hello world'.includes('hello') returns true.

How do I split a string into an array in JavaScript?

Use the .split() method. For example, 'a,b,c'.split(',') returns ['a', 'b', 'c'].

How do I trim whitespace from a string in JavaScript?

Use the .trim() method. For example, ' hello '.trim() returns 'hello' without the surrounding spaces.

What's Next?

Up next: JavaScript keywords—learn about the special words that make the language work.