Beginner's Guide to String Methods in JavaScript

First, a quick overview: In JavaScript, a string object is used to represent a sequence of one or more characters. A string can contain any number of letters, numbers, or symbols.

Strings can be created by using single quotes, double quotes, or template literals (backticks).

'This is a string.'
"This is also a string."

Strings are an immutable (unchanging), primitive data type. It is important to remember that string indexes are zero-based: this means that the first character is in position 0, the second in 1, and so on. Because JavaScript treats strings as objects, they also have a number of built-in methods, some of which we will be covering in this blog post. You can try any of these examples in your browser's console.

---

charAt()

Returns the character at a specific index. As mentioned above, all strings have zero-based indices. In the string hello for example, h is at index 0, e is at index 1, l at index 2, and so on. We can access each character in two ways. One is using the charAt() method:

'hello'.charAt(0); // gives value "h"

Because strings can be treated like arrays, you can access the same value by using the index number in square brackets:

'hello'[0];  // also gives value "h"

---

concat()

Combines the text of multiple strings and returns a new string. This method does not change the original strings.

let str1 = 'Hello, ';
let str2 = 'World.';
let result = str1.concat(str2); // returns 'Hello, World."

There is a second way to easily concatenate strings in JavaScript: use the + concatenation operator.

'race' + 'car' // returns 'racecar'

Interestingly, if you concatenate non-string variables, JavaScript will type-convert them into strings. For example:

console.log('huge' + 100 + false); // logs 'huge100false'

---

includes()

This method will return true if the string it's called on contains a specified string. It is case sensitive.

let text = 'I am the best at coding.';
let doesItInclude = text.includes('best'); // returns 'true'

---

indexOf()

This method will return the position of the first occurrence of a specified value in a string. It will return -1 if the value isn't found at all. Like includes(), it is case sensitive.

let text = 'I love to code!';
let result = text.indexOf('love'); // returns '2'

You can add an optional second argument: the position to start from (the default is 0).

---

length

Quite simply, this will return the length of the string it's called on.

'Amazing!'.length; // returns 8

---

repeat()

This method returns a new string with copies of a string, the number of which is specified in the parenthesis. The original string is not modified.

'I love JavaScript!'.repeat(4); // returns 'I love JavaScript!I love JavaScript!I love JavaScript!I love JavaScript!'

---

slice()

Slice extracts a part of the string, specified by one or two parameters: The first is the start position, the second is where to end (up to, but not including) the slice. If no second argument is provided, the default is the entire string length. This method returns a new string. A negative number will select from the end of the string.

let sentence = 'Hello, World!';
let result = sentence.slice(7, 12); // returns 'World'

let result2 = sentence.slice(7); // returns 'World!'

---

split()

This method takes a string and splits it into an array containing substrings. It will return the new array without changing the original string. This is particularly useful if you'd like to split a sentence into a number of separate words.

let sentence = 'An array would be nice!';
const myArray = sentence.split(' ');

myArray; // returns ['An', 'array', 'would', 'be', 'nice!']

---

toLowerCase() and toUpperCase()

This simple method returns a new string with the letters of the original string converted to lowercase letters. toUpperCase() takes a string and converts all the letters to uppercase.

let text = 'I am the greatest!';
text.toUpperCase(); // returns 'I AM THE GREATEST!'

---

toString()

This method is a bit different from the others because it turns other data types in JavaScript into a string. You can convert numbers, booleans, or even objects to strings.

(15).toString(); // returns '15'
(false).toString(); // returns 'false'

---

This has been an overview of common string methods used in JavaScript. A more comprehensive list can be found on MDN Web Docs.

Thanks for reading!