Introduction to Strings in JavaScript

Grokking JavaScript Fundamentals

Ask Author

Back to course home

0% completed

Vote For New Content

Introduction to Strings in JavaScript

Table of Contents

Contents are not accessible

Strings in JavaScript are used to store and manipulate text. They can be anything from letters and spaces to symbols and numbers, enclosed within quotes. Understanding how to work with strings is fundamental in JavaScript as they are one of the most common types of data you'll encounter and manipulate in web development.

Creating Strings

Strings can be created using single quotes, double quotes, or backticks (template literals), each serving different purposes and functionalities.

Using Single Quotes

Single quotes create a straightforward string.

Javascript

. . . .

Single quotes are useful for enclosing simple character data.

Using Double Quotes

Double quotes also denote strings and work similarly to single quotes.

Javascript

. . . .

Double quotes can be used interchangeably with single quotes, but consistency is key for readability.

Using Backticks (Template Literals)

Backticks denote template literals, allowing for multi-line strings and string interpolation.

Javascript

. . . .

Template literals provide a powerful way to embed expressions within strings.

Accessing the Characters from a String

In JavaScript, individual characters within a string can be accessed using the bracket notation ([]), similar to accessing array elements. This is a common task when you need to inspect, manipulate, or evaluate specific characters within a string.

Example: Accessing Characters

Let's consider a simple example where we access specific characters in a string:

Javascript

. . . .

In this example:

The string greeting contains the text "Hello, World!".
greeting[0] accesses the first character of the string, which is "H", because string indices start at 0.
greeting[7] accesses the eighth character, which is "W", demonstrating how you can jump to any position within the string.

Explanation

Strings in JavaScript are indexed from zero, meaning the first character is at index 0, the second at index 1, and so on.
Accessing characters using the bracket notation is read-only. Attempting to modify a character in this way does not change the original string because strings in JavaScript are immutable.
If you attempt to access an index outside the range of the string, such as greeting[50], the result will be undefined.

Quotes Inside the String

Mixing quotes can be useful for including quotations within a string.

Javascript

. . . .

Use one type of quote inside a string delimited by another type to avoid the need for escaping.

Escape Character

Escape characters in JavaScript are special characters used within strings to represent characters that otherwise have a different meaning or are not easily typed directly into a string. Here's a table of common escape characters:

Escape Character	Represents
`\'`	Single quote (`'`)
`\"`	Double quote (`"`)
`\\`	Backslash (`\`)
`\n`	New line
`\r`	Carriage return
`\t`	Horizontal tab
`\b`	Backspace
`\f`	Form feed
`\v`	Vertical tab (not supported in all browsers)
`\0`	Null character
`\uXXXX`	Unicode character specified by hexadecimal number `XXXX`

These escape characters enable you to include special characters in strings, format strings in specific ways (e.g., adding new lines or tabs), and use characters that would otherwise conflict with the string delimiters.

Example

Javascript

. . . .

In the above example, the backslash escapes special characters within a string.

Multiline String

Before ES6, strings spanned multiple lines by using the escape character. Template literals introduced a cleaner way to write multiline strings.

Javascript

. . . .

Template literals simplify the creation of multiline strings.

Adding Number and String

When you add a number and a string together, JavaScript converts the number to a string.

Javascript

. . . .

This feature is handy for concatenating text with numerical data.

JavaScript Strings as Objects

In JavaScript, strings can be defined as both primitives and objects. While it's more common to work with string literals (primitives), understanding how and why strings might be used as objects can be beneficial.

Creating String Objects

String objects are created using the new keyword along with the String constructor. This approach wraps the string literal in an object:

Javascript

. . . .

Here, stringObject is an instance of the String object. It behaves differently from a string primitive in that it's a distinct object with properties and methods.

Example

Let's compare a String object with a string literal:

Javascript

. . . .

The typeof operator reveals that stringObject is an "object", whereas stringLiteral is a "string". This difference illustrates the fundamental distinction between String objects and string literals.
When comparing stringObject and stringLiteral using the strict equality operator (===), the result is false because one is an object and the other is a primitive value.

Key Differences

Performance: String literals are generally faster to process than String objects because there's no overhead of object creation.
Equality: String literals compared using == or === are compared by their values, while String objects are compared by reference, meaning two String objects with the same value are not strictly equal because they are different objects in memory.
Usage: Most common string operations can be performed with string literals, and methods available on the String prototype are also available to string literals through JavaScript's automatic boxing, which temporarily wraps string primitives in String objects when calling methods.

.....

Like the course? Get enrolled and start learning!

Table of Contents

Contents are not accessible