In this chapter, we will learn about JavaScript strings. Strings are used to store and manipulate text. We will cover:
- Introduction to Strings
- Creating Strings
- String Methods and Properties
- Template Literals
- String Concatenation
- Escape Characters
- Multiline Strings
- String Comparison
- String Immutability
- String Length
Introduction to Strings
A string is a sequence of characters used to represent text. Strings can include letters, numbers, symbols, and whitespace.
Creating Strings
There are different ways to create strings in JavaScript:
Using Double Quotes
let greeting = "Hello, World!";
Using Single Quotes
let greeting = 'Hello, World!';
Using Template Literals (Backticks)
let greeting = `Hello, World!`;
Using the String Constructor
let greeting = new String("Hello, World!");
String Methods and Properties
JavaScript provides various methods and properties to work with strings.
String Length
The length
property returns the length of a string.
let str = "Hello, World!"; console.log(str.length); // Output: 13
Accessing Characters
You can access characters in a string using bracket notation.
let str = "Hello"; console.log(str[0]); // Output: H console.log(str[1]); // Output: e
Common String Methods
charAt()
Returns the character at a specified index.
let str = "Hello"; console.log(str.charAt(0)); // Output: H
toUpperCase()
Converts a string to uppercase.
let str = "hello"; console.log(str.toUpperCase()); // Output: HELLO
toLowerCase()
Converts a string to lowercase.
let str = "HELLO"; console.log(str.toLowerCase()); // Output: hello
indexOf()
Returns the index of the first occurrence of a specified value.
let str = "Hello, World!"; console.log(str.indexOf("World")); // Output: 7
lastIndexOf()
Returns the index of the last occurrence of a specified value.
let str = "Hello, World! Hello!"; console.log(str.lastIndexOf("Hello")); // Output: 13
includes()
Checks if a string contains a specified value.
let str = "Hello, World!"; console.log(str.includes("World")); // Output: true
startsWith()
Checks if a string starts with a specified value.
let str = "Hello, World!"; console.log(str.startsWith("Hello")); // Output: true
endsWith()
Checks if a string ends with a specified value.
let str = "Hello, World!"; console.log(str.endsWith("World!")); // Output: true
substring()
Extracts a part of a string between two specified indices.
let str = "Hello, World!"; console.log(str.substring(0, 5)); // Output: Hello
slice()
Extracts a part of a string and returns a new string.
let str = "Hello, World!"; console.log(str.slice(0, 5)); // Output: Hello console.log(str.slice(-6)); // Output: World!
trim()
Removes whitespace from both ends of a string.
let str = " Hello, World! "; console.log(str.trim()); // Output: "Hello, World!"
replace()
Replaces a specified value with another value in a string.
let str = "Hello, World!"; let newStr = str.replace("World", "JavaScript"); console.log(newStr); // Output: Hello, JavaScript!
split()
Splits a string into an array of substrings.
let str = "Hello, World!"; let arr = str.split(", "); console.log(arr); // Output: ["Hello", "World!"]
Template Literals
Template literals allow you to embed expressions inside strings. They are enclosed by backticks (`
).
Example
let name = "Arjun"; let greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, Arjun!
Template literals can also span multiple lines.
Example
let message = `This is a long message that spans multiple lines.`; console.log(message);
String Concatenation
String concatenation is the process of joining two or more strings. You can use the +
operator or the concat()
method.
Using the +
Operator
let str1 = "Hello"; let str2 = "World"; let result = str1 + ", " + str2 + "!"; console.log(result); // Output: Hello, World!
Using the concat()
Method
let str1 = "Hello"; let str2 = "World"; let result = str1.concat(", ", str2, "!"); console.log(result); // Output: Hello, World!
Escape Characters
Escape characters are used to include special characters in strings.
Common Escape Characters
\'
: Single quote\"
: Double quote\\
: Backslash\n
: New line\r
: Carriage return\t
: Tab\b
: Backspace\f
: Form feed
Example
let str = "He said, \"Hello, World!\""; console.log(str); // Output: He said, "Hello, World!"
Multiline Strings
Multiline strings can be created using template literals or the \
escape character.
Using Template Literals
let message = `This is a long message that spans multiple lines.`; console.log(message);
Using the \
Escape Character
let message = "This is a long message \ that spans multiple lines."; console.log(message);
String Comparison
Strings can be compared using the comparison operators (==
, ===
, !=
, !==
, <
, >
, <=
, >=
).
Example
let str1 = "apple"; let str2 = "banana"; console.log(str1 === str2); // Output: false console.log(str1 < str2); // Output: true (because "a" comes before "b" in the alphabet)
String Immutability
Strings in JavaScript are immutable, meaning their values cannot be changed after they are created. Any operation that appears to modify a string actually creates a new string.
Example
let str = "Hello"; str[0] = "J"; // This will not change the string console.log(str); // Output: Hello let newStr = str.replace("H", "J"); console.log(newStr); // Output: Jello
String Length
The length
property returns the length of a string.
Example
let str = "Hello, World!"; console.log(str.length); // Output: 13
Conclusion
In this chapter, you learned about JavaScript strings, including different ways to create strings, string methods and properties, template literals, string concatenation, escape characters, multiline strings, string comparison, string immutability, and string length. Understanding strings and their associated methods is essential for manipulating and working with text in JavaScript.