Strings in JavaScript are used to represent textual data and are one of the most commonly used data types. JavaScript strings are sequences of characters enclosed in single quotes (‘…'), double quotes (“…”), or backticks (`…`).
They come with many built-in methods to manipulate text, making them very versatile for various applications.
This tutorial will cover how to create strings, use common string methods, and provide examples for each.
1. Creating Strings
In JavaScript, strings can be created using single quotes, double quotes, or backticks.
Example 1: Creating Strings
const singleQuoteString = 'Hello, World!'; const doubleQuoteString = "Hello, World!"; const templateString = `Hello, World!`; console.log(singleQuoteString); // Output: Hello, World! console.log(doubleQuoteString); // Output: Hello, World! console.log(templateString); // Output: Hello, World!
Explanation: Strings created using single quotes, double quotes, or backticks behave the same. However, backticks (template literals) allow you to embed expressions and multiline text.
2. String Length
You can find the length of a string using the .length property.
Example 2: Getting the Length of a String
const text = 'JavaScript is awesome!'; console.log(text.length); // Output: 21
3. Accessing Characters in a String
You can access individual characters in a string using bracket notation ([]) or the .charAt() method.
Example 3: Accessing Characters in a String
const text = 'JavaScript'; console.log(text[0]); // Output: J console.log(text.charAt(4)); // Output: S console.log(text[text.length - 1]); // Output: t (last character)
4. String Methods
4.1 toUpperCase() and toLowerCase()
These methods convert the entire string to uppercase or lowercase.
Example 4: Using toUpperCase() and toLowerCase()
const text = 'JavaScript is Fun!'; console.log(text.toUpperCase()); // Output: JAVASCRIPT IS FUN! console.log(text.toLowerCase()); // Output: javascript is fun!
4.2 indexOf() and lastIndexOf()
indexOf(): Returns the position of the first occurrence of a specified value.
lastIndexOf(): Returns the position of the last occurrence of a specified value.
Example 5: Using indexOf() and lastIndexOf()
const text = 'Hello, World! Hello, JavaScript!';
console.log(text.indexOf('Hello')); // Output: 0
console.log(text.lastIndexOf('Hello')); // Output: 14
console.log(text.indexOf('JavaScript')); // Output: 20
console.log(text.indexOf('Python')); // Output: -1 (not found)
4.3 includes()
The includes() met
hod checks if a string contains a specified value. It returns true or false.
Example 6: Using includes()
const text = 'JavaScript is fun!';
console.log(text.includes('JavaScript')); // Output: true
console.log(text.includes('Python')); // Output: false
4.4 slice()
The slice() method extracts a section of a string and returns it as a new string. It accepts two parameters: the starting index (inclusive) and the ending index (exclusive).
Example 7: Using slice()
const text = 'Hello, JavaScript!'; console.log(text.slice(0, 5)); // Output: Hello console.log(text.slice(7)); // Output: JavaScript! (from index 7 to end) console.log(text.slice(-10, -1)); // Output: JavaScript (negative indices count from end)
4.5 substring()
The substring() method is similar to slice(), but it doesn't accept negative indices. It extracts characters between two specified indices.
Example 8: Using substring()
const text = 'JavaScript is fun!'; console.log(text.substring(0, 10)); // Output: JavaScript console.log(text.substring(11)); // Output: is fun!
4.6 substr()
The substr() method extracts a specified number of characters from a string, starting at a given index.
Example 9: Using substr()
const text = 'JavaScript is awesome!'; console.log(text.substr(0, 10)); // Output: JavaScript (start at index 0, extract 10 characters) console.log(text.substr(11, 2)); // Output: is (start at index 11, extract 2 characters) console.log(text.substr(-9, 7)); // Output: awesome (start 9 characters from the end, extract 7 characters)
5. String Manipulation
5.1 replace()
The replace() method replaces a specified value with another value in a string. By default, it replaces only the first occurrence. Use a regular expression with the g flag to replace all occurrences.
Example 10: Using replace()
const text = 'I love JavaScript. JavaScript is awesome!';
console.log(text.replace('JavaScript', 'Python')); // Output: I love Python. JavaScript is awesome!
console.log(text.replace(/JavaScript/g, 'Python')); // Output: I love Python. Python is awesome!
5.2 split()
The split() method splits a string into an array of substrings based on a specified delimiter.
Example 11: Using split()
const text = 'JavaScript,Python,Ruby';
const languages = text.split(',');
console.log(languages); // Output: ['JavaScript', 'Python', 'Ruby']
5.3 trim()
The trim() method removes whitespace from both ends of a string.
Example 12: Using trim()
const text = ' Hello, JavaScript! '; console.log(text.trim()); // Output: 'Hello, JavaScript!'
6. Template Literals
Template literals allow you to embed variables and expressions inside a string. They use backticks (`) and ${} to embed expressions.
Example 13: Using Template Literals
const name = 'Alice';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is Alice and I am 30 years old.
// Multiline strings with template literals
const multiline = `This is line 1
This is line 2
This is line 3`;
console.log(multiline);
/*
Output:
This is line 1
This is line 2
This is line 3
*/
7. Concatenating Strings
You can concatenate strings using the + operator or the .concat() method.
Example 14: Concatenating Strings
const str1 = 'Hello, '; const str2 = 'World!'; console.log(str1 + str2); // Output: Hello, World! console.log(str1.concat(str2)); // Output: Hello, World!
8. Escape Characters in Strings
JavaScript provides several escape characters to use special characters within a string.
\': Single quote
\”: Double quote
\\: Backslash
\n: New line
\t: Tab
Example 15: Using Escape Characters
const text = 'He said, "It\'s a sunny day."'; console.log(text); // Output: He said, "It's a sunny day." const multiLine = 'Line 1\nLine 2\nLine 3'; console.log(multiLine); /* Output: Line 1 Line 2 Line 3 */
Conclusion
Strings are an essential part of JavaScript, and the language provides a rich set of methods for manipulating and working with textual data.
This tutorial covered creating strings, accessing their properties, using built-in methods to modify and inspect them, and using template literals for more complex string handling.
By mastering these methods, you can efficiently work with text in JavaScript.
Feel free to explore and experiment with these examples to become more comfortable with JavaScript strings!