JavaScript Strings 101: The Complete Beginner’s Guide
Welcome to this beginner’s guide to JavaScript string methods. In this post, we will be covering some of the most commonly used string methods in JavaScript. These methods are incredibly useful when working with strings, and can help you to manipulate and work with text data in a variety of ways.
Whether you’re just getting started with JavaScript or you’re a seasoned developer, this post will help you to understand the basics of string methods and how to use them in your code. We will be looking at different methods such as charAt(), concat(), indexOf(), lastIndexOf(), slice() and split() and how they can help you work with strings in javascript.
Here’s a list of common string methods in JavaScript, along with explanations and examples to help you understand how they work:
1. charAt()
The charAt() method returns the character at a specified index in a string. The index is a number that starts at 0 for the first character, and goes up to the length of the string minus 1.
let str = "Hello, world!";
console.log(str.charAt(0)); // "H"
console.log(str.charAt(7)); // "w"
console.log(str.charAt(12)); // "!"
console.log(str.charAt(20)); // "" (empty string)What if we don’t provide anything as parameter? Simply, it will take 0 as default value and return the first character of the string.
2. concat()
The concat() method combines (concatenates) two or more strings, and returns a new string.
let str1 = "Hello";
let str2 = " world!";
let str3 = str1.concat(str2);
console.log(str3); // "Hello world!"You can also concatenate multiple strings by passing them as separate arguments to the concat() method:
let str1 = "Hello";
let str2 = " world";
let str3 = "!";
let greeting = str1.concat(str2, str3);
console.log(greeting); // "Hello world!"3. indexOf()
The indexOf() method returns the index of the first occurrence of a specified value in a string, or -1 if the value is not found. For example:
let str = "Hello, world!";
console.log(str.indexOf("H")); // 0
console.log(str.indexOf("l")); // 2
console.log(str.indexOf("o")); // 4
console.log(str.indexOf("z")); // -1You can also search for a specified value starting at a certain index by passing a second argument to the indexOf() method:
let str = "Hello, world!";
console.log(str.indexOf("l", 3)); // 9
console.log(str.indexOf("l", 10)); // -14. lastIndexOf()
The lastIndexOf() method works like the indexOf() method, but searches for the specified value from the end of the string rather than the beginning.
Example
let str = "Hello, world!";
console.log(str.lastIndexOf("l")); // 10
console.log(str.lastIndexOf("o")); // 7
console.log(str.lastIndexOf("H")); // 0
console.log(str.lastIndexOf("z")); // -1As with indexOf(), you can pass a second argument to specify the index at which to start the search:
let str = "Hello, world!";
console.log(str.lastIndexOf("l", 9)); // 2
console.log(str.lastIndexOf("l", 1)); // -15. slice()
The slice() method extracts a part of a string and returns a new string. You can specify the start index and end index of the part you want to extract. The slice() method does not modify the original string.
let str = "Hello, world!";
console.log(str.slice(0, 5)); // "Hello"
console.log(str.slice(7, 12)); // "world"
console.log(str.slice(2)); // "llo, world!"You can also use negative indices to specify the index from the end of the string:
let str = "Hello, world!";
console.log(str.slice(-5)); // "world"
console.log(str.slice(-9, -5)); // "world"6. split()
The split() method splits a string into an array of substrings, based on a specified separator string.
let str = "Hello, world!";
console.log(str.split(",")); // ["Hello", " world!"]
console.log(str.split(" ")); // ["Hello,", "world!"]
console.log(str.split("")); // ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d", "!"]7. substring()
The substring() method extracts a part of a string and returns a new string. You can specify the start index and end index of the part you want to extract, just like with the slice() method. However, the substring() method treats negative indices as 0, and it also swaps the indices if the start index is greater than the end index.
let str = "Hello, world!";
console.log(str.substring(0, 5)); // "Hello"
console.log(str.substring(7, 12)); // "world"
console.log(str.substring(2)); // "llo, world!"
let str = "Hello, world!";
console.log(str.substring(-5)); // "Hello, world!" (treated as 0)
console.log(str.substring(-9, -5)); // "Hello, world!" (treated as 0)
console.log(str.substring(12, 7)); // "world" (indices are swapped)8. toLowerCase() and toUpperCase()
The toLowerCase() and toUpperCase() methods convert a string to all lowercase or all uppercase letters, respectively. These methods do not modify the original string, but return a new string with the converted letters.
let str = "Hello, world!";
console.log(str.toLowerCase()); // "hello, world!"
console.log(str.toUpperCase()); // "HELLO, WORLD!"9. trim()
The trim() method removes whitespace (spaces, tabs, and newlines) from the beginning and end of a string. This can be useful if you want to make sure that a string doesn’t have any extra spaces that might cause issues when you’re working with it.
let str = " Hello, world! ";
console.log(str.trim()); // "Hello, world!"10. length
The length property of a string returns the number of characters in the string. This can be useful for looping through all the characters in a string, or for checking if a string meets a certain length requirement.
let str = "Hello, world!";
console.log(str.length); // 13In this post, we’ve covered some of the most commonly used string methods in JavaScript. We’ve looked at how you can use these methods to manipulate and work with text data in a variety of ways. By understanding the basics of these string methods, you can start using them in your own JavaScript code to make your work with strings much easier and more efficient. With this understanding, you can start using these string methods in your own JavaScript code to manipulate and work with text data in a variety of ways.
