Forum Donate

Learn to code — free 3,000-hour curriculum

JANUARY 5, 2024 / #HANDBOOK

The JavaScript String

Handbook – How to Work
with Strings in JS
Joan Ayebola
 Forum Donate

Learn to code — free 3,000-hour curriculum

 Forum Donate

Strings, in the context

Learn to code of JavaScript,
— free are essential data
3,000-hour curriculum
types that represent sequences of characters. They are
integral to web development, forming the foundation
for handling and presenting textual information on
websites. Whether it's displaying user names, handling
form input, or generating dynamic content, strings are
omnipresent in JavaScript programming.

String manipulation is a crucial aspect of programming in JavaScript,

enabling developers to transform, analyze, and present data
effectively. The ability to manipulate strings efficiently empowers
developers to craft robust and user-friendly applications.

This article serves as a guide to navigating the intricate landscape of

string handling in JavaScript. By delving into the basics, properties,
methods, and advanced techniques, you will gain a thorough
understanding of how to wield strings effectively. The goal is to equip
you with the knowledge and skills needed to harness the full potential
of strings in JavaScript.

Table of Contents
1. What are Strings in JavaScript

2. Basic String Operations

– Single and double quotes

3. Template Literals
– Basic usage
– Multiline strings
– Expression evaluation
 – Tagged templates Forum Donate
– Use cases
Learn to code — free 3,000-hour curriculum
4. The String Constructor
– Using the Strings Constructor
– String objects vs. string primitives
– Converting string objects to primitives
– Rare use cases

5. The String.fromCharCode Method

– Basic usage
– Creating Strings from Unicode Values
– Use cases

6. Concatenation
– Using the + operator
– Using the concat method
– Concatenating Variables and Strings
– Combining String.fromCharCode with Concatenation

7. Characteristics of Strings
– Immutability
– Sequence of characters

8. Case Manipulation Methods

– toUpperCase()
– toLowerCase()

9. Trimming whitespaces with trim(), trimStart(), and trimEnd()

– trim()
– trimStart()
– trimEnd()
– Use Cases

10. String Searching

– indexOf() and lastIndexOf()
 – includes() method for substring presence Forum Donate
– startsWith() and endsWith() methods
Learn to code — free 3,000-hour curriculum
11. Substring extraction with slice() and substring()
– slice()
– substring()

12. Modifying Strings

– Replacing substrings with replace() method
– Splitting strings with split()
– Joining arrays into a string with join()

13. String Comparison

– Equality checks with === and ==
– Locale-sensitive string comparison using localeCompare()
– Comparing Strings Using localeCompare()

14. Regular Expressions and Strings

– Using RegExp for string matching and manipulation
– String methods with regular expressions: match(), search(),
replace()

15. Unicode and Strings

– Strings and Unicode in JavaScript
– Creating Unicode strings
– Unicode Code Points
– Code Point Iteration

16. Common String Pitfalls

– String vs. number coercion
– Unexpected Behavior with Whitespace
– Dealing with special characters

17. [Case Studies and Examples](#Case Studies and Examples)

– User input validation
– Formatting names
18. Conclusion Forum Donate

Learn to code — free 3,000-hour curriculum

What are Strings in JavaScript?

In JavaScript, strings are sequences of characters enclosed in either
single or double quotes. This flexibility allows developers to choose
the quotation style based on preference or contextual requirements.
For instance:

let greeting = "Hello, World!";

let message = "JavaScript is powerful.";

Basic String Operations

Creating strings in JavaScript is a fundamental operation, and there
are multiple ways to achieve this. Let's explore the various methods of
creating strings in JavaScript.

Single and Double Quotes

In JavaScript, strings can be created using either single quotes ( ' ) or
double quotes ( " ). Both types of quotes are interchangeable, and the
choice between them is often a matter of personal preference or
adherence to coding conventions.

Single Quotes

const singleQuotedString = 'Hello, World!';

 Forum Donate
Double Quotes
Learn to code — free 3,000-hour curriculum

const doubleQuotedString = "Hello, World!";

In the examples above, singleQuotedString and doubleQuotedString

both represent the same string, "Hello, World!" . The use of single or
double quotes is largely a stylistic choice, and there is no functional
difference between them in JavaScript.

Escaping Quotes
If you need to include a quote character within a string that is enclosed
by the same type of quote, you can use the backslash ( \ ) as an escape
character:

const stringWithSingleQuotes = 'He said, \'Hello!\'';

const stringWithDoubleQuotes = "She said, \"Hi!\"";

In the examples above, the backslash before the single or double

quotes allows it to be treated as a literal character within the string.

Choosing Between Single and Double Quotes

The choice between single and double quotes often depends on
personal or team preferences. Some developers or coding conventions
may favor one over the other for consistency within a codebase.

While you can freely switch between single and double quotes, even
within the same project, like this:
 Forum Donate

const message1 = 'This

Learn is—a free
to code message with single
3,000-hour quotes.';
curriculum
const message2 = "This is a message with double quotes.";

it's essential to be consistent in your usage throughout your code to

maintain readability and avoid confusion:

// Consistent use of single quotes

const message1 = 'This is a message.';
const name = 'John';

// Consistent use of double quotes

const message2 = "This is another message.";
const greeting = "Hello";

Whether you choose single or double quotes, the important thing is to

be consistent in your usage to ensure clean and readable code.

Template Literals
Template literals, introduced in ECMAScript 6 (ES6), provide a more
powerful and flexible way to create strings in JavaScript. They offer
improved syntax for embedding variables and expressions within
strings, making the code more concise and readable.

Basic Usage

const name = 'John';

const greeting = `Hello, ${name}!`;
 Forum Donate
console.log(greeting); // Output: Hello, John!

Learn to code — free 3,000-hour curriculum

In this example, the string is defined using backticks ( `), and the
variable name is embedded within the string using ${}`. This
syntax allows you to seamlessly include variables and expressions
directly in the string.

Multiline Strings
Template literals also support multiline strings, making it more
convenient to represent multiline text without resorting to
concatenation or special characters:

const multilineString = `
This is a multiline
string using template literals.
`;

console.log(multilineString);

/*
Output:
This is a multiline
string using template literals.
*/

Expression Evaluation
Expressions within ${} are evaluated, allowing for more complex
expressions and calculations within the string:
 const num1 = 5;
Forum Donate
const num2 = 10;
Learn to code — free 3,000-hour curriculum
const result = `The sum of ${num1} and ${num2} is ${num1 + num2}.`;

console.log(result); // Output: The sum of 5 and 10 is 15.

Tagged Templates
Template literals can also be used with a function, known as a "tag
function," allowing for more advanced string processing. The function
receives the string parts and values as separate arguments, enabling
custom string manipulation:

function customTag(strings, ...values) {

const result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
result += values[i];
}
}
return result;
}

const name = 'John';

const age = 30;
const taggedResult = customTag`My name is ${name} and I am ${age} y

console.log(taggedResult); // Output: My name is John and I am 30 y

Use Cases
Dynamic String Creation
Template literals are especially useful when creating strings
Forum Donate
dynamically based on variables or expressions:
Learn to code — free 3,000-hour curriculum

const product = 'Laptop';

const price = 1200;

const purchaseDetails = `You have purchased a ${product} for $${pri

console.log(purchaseDetails);
// Output: You have purchased a Laptop for $1200.

HTML Templates
Template literals are commonly used in frontend development for
creating HTML templates dynamically:

const itemName = 'Smartphone';

const itemDescription = 'The latest model with advanced features.';

const htmlTemplate = `
<div class="item">
<h2>${itemName}</h2>
<p>${itemDescription}</p>
</div>
`;

Template literals offer a more elegant and expressive way to work

with strings, especially in scenarios where dynamic content or
multiline strings are involved. Their introduction has significantly
improved the readability and maintainability of JavaScript code.

The String Constructor

In JavaScript, the String constructor is a way to create Forum
a string Donate
object. While most developers commonly create strings using string
Learn to code — free 3,000-hour curriculum
literals (single or double quotes) or template literals (backticks), the
String constructor provides an alternative approach for creating
strings.

Using the String Constructor

const str = new String('This is a string');

console.log(str); // Output: This is a string

In this example, the new String syntax is used to create a string

object with the value 'This is a string' . However, it's important to
note that using the String constructor to create strings is less
common in everyday JavaScript programming compared to using
string literals.

String Objects vs. String Primitives

Strings created using the String constructor are instances of the
String object, while strings created with string literals are primitive
values. This distinction has implications for how these strings behave:

const primitiveString = 'Hello, World!'; // primitive string

const objectString = new String('Hello, World!'); // string object

console.log(typeof primitiveString); // Output: string

console.log(typeof objectString); // Output: object
As seen in the example above, primitiveString is of type string , Donate
Forum
while objectString is of type object . Most string operations are
Learn to code — free 3,000-hour curriculum
designed to work with primitive strings, and in most cases, using string
literals is preferred.

Converting String Objects to Primitives

In situations where you have a string object but need to perform string
operations that work with primitives, you can convert the object to a
primitive string using the valueOf or toString method:

const objectString = new String('Hello, World!');

const primitiveString = objectString.valueOf();

console.log(typeof primitiveString); // Output: string

Rare Use Cases

The String constructor is rarely used for creating strings in typical
JavaScript development. String literals and template literals are more
concise and widely accepted in the community. However, the String
constructor may have niche use cases where you need to work with
string objects explicitly:

const str1 = 'Hello';

const str2 = new String('Hello');

console.log(str1 === str2); // Output: false

In the example above, str1 and str2 may have the same value, but Donate
Forum
they are not strictly equal because str2 is a string object.
Learn to code — free 3,000-hour curriculum

In summary, while the String constructor offers an alternative way

to create strings as objects, it is not the preferred method for
everyday string creation in JavaScript. Using string literals is more
concise, readable, and aligns with common coding practices.

The String.fromCharCode Method

The String.fromCharCode method in JavaScript is a way to create a
string from a sequence of Unicode values. Unicode is a standardized
character encoding system that assigns a unique number to each
character, ensuring consistency across different platforms and
languages.

Basic Usage

const str = String.fromCharCode(72, 101, 108, 108, 111);

console.log(str); // Output: Hello

In this example, the Unicode values 72 , 101 , 108 , 108 , and 111
correspond to the characters H , e , l , l , and o , respectively. The
String.fromCharCode method takes these values as arguments and
returns a string composed of the corresponding characters.

Creating Strings from Unicode Values

You can use String.fromCharCode to create strings from a series of
Unicode values. For instance, to create a string representing the word
JavaScript :
 Forum Donate

Learn to code — free 3,000-hour curriculum

const jsString = String.fromCharCode(74, 97, 118, 97, 83, 99, 114,
console.log(jsString); // Output: JavaScript

This method is less commonly used for straightforward string

creation, but can be useful in situations where you have specific
Unicode values to represent characters.

Use Cases:
Generating Strings with Specific Characters

const specialString = String.fromCharCode(9829, 9786, 8482);

console.log(specialString); // Output: ♥☺™

This can be useful when you want to include special symbols or

characters in your strings.

Dynamic String Creation

const unicodeValues = [72, 105, 33];

const dynamicString = String.fromCharCode(...unicodeValues);
console.log(dynamicString); // Output: Hi!

Using the spread operator ( ... ) allows you to pass an array of

Unicode values.
While the String.fromCharCode method may not be as commonly
Forum Donate
used as other string creation methods, it provides a unique approach
Learn to code — free 3,000-hour curriculum
when dealing with specific character encodings or when you have a
sequence of Unicode values that need to be converted into a string.
Understanding its use cases can enhance your toolkit for string
manipulation in JavaScript.

Concatenation
Concatenation is a fundamental string operation in JavaScript that
involves combining two or more strings into a single string. This
process allows you to build longer strings by appending or joining
existing ones. In JavaScript, concatenation can be achieved using the
+ operator or the concat method.

Using the + Operator

The + operator is the most common way to concatenate strings. It
works by combining the characters of two strings to create a new
string:

const firstName = 'John';

const lastName = 'Doe';
const fullName = firstName + ' ' + lastName;
console.log(fullName); // Output: John Doe

In this example, the strings John and Doe are concatenated with a
space in between to form the full name John Doe .

You can also concatenate more than two strings:

 Forum Donate
const greeting = 'Hello';
const target Learn
= 'World';
to code — free 3,000-hour curriculum
const message = greeting + ', ' + target + '!';
console.log(message); // Output: Hello, World!

Using the concat Method

The concat method is an alternative way to concatenate strings. It's a
string method that can be used to concatenate two or more strings:

const firstName = 'John';

const lastName = 'Doe';
const fullName = firstName.concat(' ', lastName);
console.log(fullName); // Output: John Doe

The concat method can take multiple arguments, concatenating them

in the order they are provided:

const str1 = 'Hello';

const str2 = ' ';
const str3 = 'World';
const greeting = str1.concat(str2, str3, '!');
console.log(greeting); // Output: Hello World!

Concatenating Variables and Strings

Concatenation is often used when combining variables and strings to
create dynamic content:
 const userName = 'John';
Forum Donate
const userGreeting = 'Welcome, ' + userName + '!';
Learn to code — free 3,000-hour curriculum
console.log(userGreeting); // Output: Welcome, John!

This is a powerful technique, especially in scenarios where you need to

construct messages, display user-friendly output, or generate dynamic
content in web applications.

It's important to note that while concatenation is a simple and

effective way to combine strings, it may become less efficient when
dealing with a large number of concatenations. In such cases, other
approaches, such as using template literals or array joins, might be
more performant.

Combining String.fromCharCode with

Concatenation
You can combine String.fromCharCode with concatenation to build
more complex strings:

const str = String.fromCharCode(72, 101) + 'llo';

console.log(str); // Output: Hello

In this example, the Unicode values for H and e are combined with
the string llo using the + operator.

Characteristics of Strings
Immutability
Immutability in JavaScript strings means that once a string is created,Donate
Forum
its content cannot be changed. Operations like concatenation or
Learn to code — free 3,000-hour curriculum
changing case create new strings, leaving the original string
unmodified. This concept ensures predictability, simplifies debugging,
and aligns with functional programming principles.

Directly modifying string characters is not allowed, reinforcing the

idea that strings are immutable. While this approach offers
advantages like clear code behavior and ease of debugging, it's
essential to consider potential memory usage implications:

// Creating an original string

const originalString = 'Hello World!';

// Concatenation creates a new string

const newString = originalString + ' Have a great day!';

// Changing case creates a new string

const upperCaseString = originalString.toUpperCase();

// Substring extraction creates a new string

const substring = originalString.slice(0, 5);

// Direct modification (which is not allowed and will result in an

// Uncommenting the line below will cause an error.
// originalString[0] = 'J';

// Outputting results
console.log('Original String:', originalString);
console.log('Concatenated String:', newString);
console.log('Uppercase String:', upperCaseString);
console.log('Substring:', substring);

In this example, each operation (concatenation, changing case, and

substring extraction) creates a new string without modifying the
original string. The attempt to directly modify a character in the
original string results in an error, emphasizing the immutability
Forum of Donate
strings in JavaScript.
Learn to code — free 3,000-hour curriculum

Also, you may have noticed some string methods like toUpperCase()
and slice() in the examples above. You'll learn more about those in
the upcoming sections.

Sequence of Characters
A sequence of characters in JavaScript refers to a linear arrangement
of individual characters that form a string. A character sequence can
include letters, numbers, symbols, and whitespace. Each character in
the sequence has a specific index or position, starting from 0 :

const greeting = 'Hello, World!';

In this example, the string 'Hello, World!' is a sequence of

characters. The first character, H , is at index 0 , the second character,
e , is at index 1 , and so on. The entire string forms a sequence of
characters in the order they appear.

Case Manipulation Methods

toUpperCase()
The toUpperCase() method transforms all characters in a string to
uppercase, providing a simple way to standardize the case of a string:

const text = "Hello, World!";

 const uppercased = text.toUpperCase(); // "HELLO, WORLD!"
Forum Donate

Learn to code — free 3,000-hour curriculum

toLowerCase()
Conversely, the toLowerCase() method converts all characters in a
string to lowercase:

const text = "Hello, World!";

const lowercased = text.toLowerCase(); // "hello, world!"

Trimming Whitespaces with

trim() , trimStart() , and
trimEnd()
In JavaScript, strings often contain leading or trailing whitespaces
(spaces, tabs, or newline characters) that may need to be removed.
The trim() , trimStart() , and trimEnd() methods provide
convenient ways to achieve this whitespace trimming.

trim()
The trim() method removes whitespaces from both ends of a string
and returns the result:

const stringWithWhitespace = ' Hello, World! ';

const trimmedString = stringWithWhitespace.trim();

console.log(trimmedString); // Output: 'Hello, World!'

 Forum Donate
In this example, the leading and trailing whitespaces in
stringWithWhitespace are removed
Learn to code using trim()
— free 3,000-hour .
curriculum

trimStart()
The trimStart() method (also known as trimLeft() ) removes
whitespaces from the beginning (start) of a string:

const stringWithLeadingWhitespace = ' Hello, World!';

const trimmedStartString = stringWithLeadingWhitespace.trimStart();

console.log(trimmedStartString); // Output: 'Hello, World!'

Here, trimStart() removes the leading whitespaces from

stringWithLeadingWhitespace .

trimEnd()
The trimEnd() method (also known as trimRight() ) removes
whitespaces from the end of a string:

const stringWithTrailingWhitespace = 'Hello, World! ';

const trimmedEndString = stringWithTrailingWhitespace.trimEnd();

console.log(trimmedEndString); // Output: 'Hello, World!'

In this example, trimEnd() eliminates the trailing whitespaces from

stringWithTrailingWhitespace .
Use Cases: Forum Donate
User Input:Learn
Whentoprocessing
code — freeuser input, especially
3,000-hour curriculumfrom forms
or text inputs, trimming is common to remove accidental
leading or trailing whitespaces.

Data Cleaning: Whitespace trimming is beneficial when

working with datasets or external data sources to ensure
consistency in string values.

Comparisons: Trimming can be useful when comparing strings,

as leading or trailing whitespaces might affect the comparison
results.

Note: These methods do not modify the original string. Instead, they
return a new string with the whitespaces removed. This is consistent
with the immutability concept in JavaScript strings.

String Searching
indexOf() and lastIndexOf()
The indexOf() method is used to find the first occurrence of a
substring within a string. If the substring is not found, it returns -1 :

const sentence = "JavaScript is powerful and versatile.";

const index = sentence.indexOf("is"); // 11

The lastIndexOf() method works similarly but starts the search from
the end of the string, allowing for reverse searching.
The includes() Method for Substring Forum Donate
Presence Learn to code — free 3,000-hour curriculum
The includes() method simplifies the task of checking whether a
string contains a specific substring, returning a boolean value:

const phrase = "To be or not to be";

const containsToBe = phrase.includes("to be"); // true

This method is particularly useful for conditional checks.

startsWith() and endsWith()

For scenarios where it is necessary to determine whether a string
starts or ends with a certain substring, the startsWith() and
endsWith() methods are useful:

const filename = "document.txt";

const isDocument = filename.startsWith("document"); // true
const isTextFile = filename.endsWith(".txt"); // true

These methods are commonly used for file type validation and similar
tasks.

Substring Extraction with slice() and

substring():
The slice() and substring() methods in JavaScript are commonly
used for extracting substrings from strings, but they have some
differences in syntax and functionality.
 Forum Donate
slice() Method:
Learn to code — free 3,000-hour curriculum
The slice() method is a versatile tool for extracting substrings based
on specified indices. It allows for the extraction of substrings from any
position within the string and supports negative indices. Here's the
syntax:

string.slice(startIndex, endIndex);

startIndex : The index at which the extraction begins.

endIndex : The index before which the extraction ends (the

character at this index is not included).

Example with Positive and Negative Indices:

let str = "Hello, World!";

let sliced1 = str.slice(7); // Extracts "World!"
let sliced2 = str.slice(-12, -1); // Extracts "ello, World"

In the first example, str.slice(7) extracts the substring starting

from index 7 to the end. In the second example, str.slice(-12, -1)
extracts the substring starting from 12 positions from the end to 1
position from the end.

substring() Method:
The substring() method is similar to slice() but has a different
syntax. It extracts a specified portion of a string but does not support
negative indices. Here's the syntax: Forum Donate

Learn to code — free 3,000-hour curriculum

string.substring(startIndex, endIndex);

startIndex : The index at which the extraction begins.

endIndex : The index before which the extraction ends (the

character at this index is not included).

Example (No Negative Indices):

let str = "Hello, World!";

let subString = str.substring(7, 12); // Extracts "World"

Unlike slice() , the substring() method does not accept negative

indices. Attempting to use negative indices with substring() will
treat them as if they were 0.

While both slice() and substring() can be used for substring

extraction, slice() is more versatile, supporting negative indices for
extraction from the end of the string. substring() , on the other hand,
lacks support for negative indices.

Modifying Strings
Replacing Substrings with replace()
The replace() method is instrumental in replacing a specified
substring with another string. This is particularly useful for updating
content dynamically: Forum Donate

Learn to code — free 3,000-hour curriculum

const message = "Learning Java is fun!";

const updatedMessage = message.replace("Java", "JavaScript");
// "Learning JavaScript is fun!"

This method is commonly used in scenarios where dynamic content

needs to be updated based on user interactions.

Splitting Strings with split()

When a string needs to be divided into an array of substrings based on
a specified separator, you can use the split() method:

const sentence = "JavaScript is a powerful language.";

const words = sentence.split(" "); // ["JavaScript", "is", "a", "po

This is particularly useful when dealing with space-separated words or

CSV (Comma-Separated Values) data.

Joining Arrays into a String with join()

Conversely, the join() method concatenates the elements of an
array into a single string, using a specified delimiter.

const fruits = ["Apple", "Banana", "Orange"];

const joinedString = fruits.join(", "); // "Apple, Banana, Orange"
This method is commonly used when converting an arrayForum
of values Donate
into a readable string representation.
Learn to code — free 3,000-hour curriculum

String Comparison
Equality Checks with === and ==
In JavaScript, comparing strings involves the use of the === and ==
operators. The === operator checks both the value and the type,
ensuring a strict equality check:

const numString = "5";

const num = 5;
const isEqualStrict = numString === num; // false

On the other hand, the == operator checks for equality with type
coercion:

const isEqualLoose = numString == num; // true

It's generally recommended to use === for more predictable and

explicit comparisons.

Locale-Sensitive String Comparison

JavaScript provides the localeCompare() method for locale-sensitive
string comparisons. This is particularly relevant when dealing with
internationalization and localization:
 Forum Donate
const string1 = "apple";
const string2Learn
= "orange";
to code — free 3,000-hour curriculum
const result = string1.localeCompare(string2);
// The result is -1, indicating "apple" comes before "orange" in th

localeCompare() considers language-specific rules for sorting and

comparison.

Comparing Strings Using localeCompare()

The localeCompare() method can also be used to compare strings in a
locale-sensitive manner, considering factors such as language-specific
rules for sorting.

const string1 = "apple";

const string2 = "orange";
const result = string1.localeCompare(string2);
// The result is -1, indicating "apple" comes before "orange" in a

This method is useful in scenarios where accurate linguistic

comparisons are essential.

Regular Expressions and Strings

Regular expressions, often referred to as regex or RegExp, provide a
powerful tool for pattern matching within strings. They enable
sophisticated search and manipulation operations based on specified
patterns.
Using RegExp for String Matching and Forum Donate
Manipulation
Learn to code — free 3,000-hour curriculum
Regular expressions can be created using the RegExp constructor or
expressed directly within slashes ( /.../ ). They offer a wide range of
options for pattern matching, such as searching for specific characters,
groups, or ranges.

String Methods with Regular Expressions:

match() , search() , replace()
match()
The match() method is used to retrieve matches when a string
matches a regular expression. It returns an array of matches or null if
no matches are found:

const sentence = "The cat and the hat";

const matches = sentence.match(/at/g); // ["at", "at"]

In this example, the regular expression /at/g uses the global flag, g ,
and searches for occurrences of at in the string.

Note: If the global flag ( g ) isn't used in the regular expression,

match() only returns the first instance of a match.

search()
The search() method returns the index of the first match of a regular
expression in a string. If no match is found, it returns -1 :
 const sentence = "The cat and the hat";
Forum Donate
const index = sentence.search(/at/); // 7
Learn to code — free 3,000-hour curriculum

In this case, the regular expression /at/ is searching for the first
occurrence of at in the string.

replace()
The replace() method is used to replace occurrences of a substring
or pattern with another string. Regular expressions enhance its
capabilities, allowing for more complex replacements:

const sentence = "The cat and the hat";

const updatedSentence = sentence.replace(/at/g, "og"); // "The cog

In this example, the regular expression /at/g is used to replace all

occurrences of at with og .

Note: If the global flag ( g ) isn't used in the regular expression,

replace() will only replace the first instance of a substring or pattern
in the original string.

Unicode and Strings

Unicode in Brief
Unicode is a standardized character encoding system that assigns a
unique numeric value (code point) to each character, symbol, or glyph
in almost every writing system used across the globe. It aims to
provide a universal encoding that encompasses all writing systems,
allowing computers to represent and manipulate text in Forum
a consistent Donate
manner.
Learn to code — free 3,000-hour curriculum

Strings and Unicode in JavaScript

In JavaScript, strings are sequences of UTF-16 code units, where each
code unit represents a 16-bit value. This means that JavaScript uses a
subset of the full Unicode range (which goes beyond the 16-bit range)
to represent characters.

Creating Unicode Strings

const unicodeString = 'Hello, \u{1F60A}'; // Using Unicode escape s

console.log(unicodeString); // Output: Hello, 😊

In the example above, the Unicode escape sequence \u{1F60A}

represents the smiling face with smiling eyes emoji. JavaScript
interprets this escape sequence and displays the corresponding
Unicode character.

Unicode Code Points

JavaScript provides methods for working with Unicode code points
directly. The codePointAt() method returns the Unicode code point
at a specific index in a string:

const greeting = 'Hello, World!';

const codePoint = greeting.codePointAt(7);
console.log(codePoint); // Output: 87 (the Unicode code point for '
Code Point Iteration Forum Donate

The for...of loop

Learncan be used
to code to 3,000-hour
— free iterate over the actual characters in
curriculum
a string, taking into account surrogate pairs for characters outside the
Basic Multilingual Plane (BMP):

const astralString = '𝒜B'; // String with characters outside the BM

for (let char of astralString) {
console.log(char); // Output: 𝒜, B
}

This loop correctly iterates over both characters in the string, even
though 𝒜 is outside the BMP.

Use Cases
Multilingual Support: Unicode enables JavaScript to handle
text in various languages and writing systems, allowing for the
creation of multilingual applications.

Emoji and Special Characters: Unicode provides a

standardized way to represent emojis, special symbols, and
characters beyond the basic Latin alphabet.

Data Exchange: Unicode is crucial for data exchange between

systems and languages, ensuring consistent representation and
interpretation of text.

Understanding Unicode is essential for working with diverse sets of

characters and symbols in JavaScript strings, especially in a globalized
and multilingual programming environment.
Common String Pitfalls Forum Donate

Learn to code — free 3,000-hour curriculum

String vs. Number Coercion
One common pitfall is unintentional coercion between strings and
numbers. JavaScript may perform implicit type conversion, leading to
unexpected behavior:

const num = 5;
const str = '10';

const result = num + str;

console.log(result); // Output: 510 (not 15!)

To avoid this, make sure to explicitly convert types when necessary:

const num = 5;
const str = '10';

const result = num + parseInt(str);

console.log(result); // Output: 15

Unexpected Behavior with Whitespace

Whitespace characters, such as spaces and tabs, can lead to
unexpected results when not handled properly. For instance:

const word1 = 'Hello';

const word2 = ' World';
 const result = word1 + word2;
Forum Donate
console.log(result); // Output: Hello World (without a space in bet

Learn to code — free 3,000-hour curriculum

To address this, trim whitespace using the trim method:

const word1 = 'Hello';

const word2 = ' World';

const result = word1.trim() + word2.trim();

console.log(result); // Output: Hello World

Dealing with Special Characters

Special characters, like quotes or backslashes, can cause issues when
included in strings:

const message = 'He said, 'JavaScript is powerful!'';

To handle this, escape special characters using backslashes:

const message = 'He said, \'JavaScript is powerful!\'';

Case Studies and Examples

Let's explore a real-world scenario where string manipulation is
essential.
User Input Validation Forum Donate

Suppose you'reLearn
building a form
to code that
— free requires acurriculum
3,000-hour user to enter their
email address. To validate the input, you can use string methods:

function validateEmail(email) {
// Check if the email contains the @ symbol
if (!email.includes('@')) {
return false;
}

// Check if the email ends with a valid domain (e.g., .com, .org)
const domain = email.split('@')[1];
const validDomains = ['com', 'org', 'net'];
if (!validDomains.includes(domain.split('.')[1])) {
return false;
}

return true;
}

const userEmail = '[email protected]';

if (validateEmail(userEmail)) {
console.log('Email is valid!');
} else {
console.log('Invalid email format.');
}

Formatting Names
Suppose you have a list of names in the format "First Last" and you
want to display them as "Last, First." You can achieve this with string
manipulation:

function formatNames(names) {
return names.map((name) => {
const [first, last] = name.split(' ');
 return `${last}, ${first}`;
});
Forum Donate
}
Learn to code — free 3,000-hour curriculum
const originalNames = ['John Doe', 'Jane Smith', 'Bob Johnson'];
const formattedNames = formatNames(originalNames);
console.log(formattedNames);
// Output: ['Doe, John', 'Smith, Jane', 'Johnson, Bob']

Conclusion
In this article, we covered the fundamentals of working with strings in
JavaScript. We explored basic operations such as concatenation and
finding the length of a string. Additionally, we delved into various
string methods for changing case, extracting substrings, finding
substrings, replacing substrings, and splitting strings.

Mastering string manipulation requires practice and experimentation.

As you work on more projects, you'll encounter diverse scenarios that
demand creative solutions involving strings. Don't hesitate to
experiment with different methods and approaches to enhance your
skills.

A solid understanding of string methods is crucial for writing clean,

efficient, and bug-free JavaScript code. As you continue your
programming journey, remember that strings are a fundamental part
of many applications, and the ability to manipulate them effectively
will significantly contribute to your success as a JavaScript developer.
Keep coding, keep learning, and enjoy the world of JavaScript!
 Joan Ayebola Forum Donate
HI, I am Joan, a frontend developer and technical writer who's deeply
Learn
passionate to open-source
about code — freetechnologies.
3,000-hourWithcurriculum
several years of experience
in the industry, I have been involved in various projects, contributing code,
and writing technical documentation to empower developers worldwide.
When not coding or writing, I enjoy crocheting, reading and listening to
podcasts.

If you read this far, thank the author to show them you care.
Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has

helped more than 40,000 people get jobs as developers.
Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.

You can make a tax-deductible donation here .

Trending Books and Handbooks

Learn CSS Transform Build a Static Blog Build an AI Chatbot

What is Programming? Python Code Examples Open Source for Devs
HTTP Networking in JS Write React Unit Tests Learn Algorithms in JS
How to Write Clean Code Learn PHP Learn Java
Forum Donate
Learn Swift Learn Golang Learn Node.js
Learn to code — free 3,000-hour curriculum
Learn CSS Grid Learn Solidity Learn Express.js
Learn JS Modules Learn Apache Kafka REST API Best Practices
Front-End JS Development Learn to Build REST APIs Intermediate TS and React
Command Line for Beginners Intro to Operating Systems Learn to Build GraphQL APIs
OSS Security Best Practices Distributed Systems Patterns Software Architecture
Patterns

Mobile App

Our Charity

About Alumni Network Open Source Shop Support Sponsors Academic Honesty

Code of Conduct Privacy Policy Terms of Service Copyright Policy