Charlie @ 90-10.dev

Posted on Mar 3, 2023 • Originally published at 90-10.dev on Jan 7, 2023

JavaScript Data Types: String

#javascript

A string is a sequence of characters enclosed within single or double quotes. They can be created using the String() function or using template literals. Template literals allow you to embed expressions, variables, and functions inside a string using the ${} syntax.

const firstName = 'John'
const lastName = 'Wick'
console.log(`My name is ${firstName} ${lastName}.`)
// Outputs: 'My name is John Wick.'

Strings in JavaScript are immutable (once created, it cannot be changed) but a new string by concatenating two or more strings using the + operator or the concat() method.

const str1 = 'hello'
const str2 = 'world'
const str3 = str1 + ' ' + str2 // str3 content is: 'hello world'

String Methods

length

Returns the length of a string (number of characters):

const hello = 'hello world';
hello.length // Returns: 11

indexOf

Returns the position of the first occurrence of a specified value or -1 if not found:

const hello = 'hello world'
hello.indexOf('o') // returns: 4
hello.indexOf('a') // returns: -1

lastIndexOf

Returns the position of the last occurrence of a specified value:

const hello = 'hello world'
hello.lastIndexOf('o') // returns: 7

charAt

Returns the character at a specified index:

const hello = 'hello world'
hello.charAt(1) // returns: 'e'

charCodeAt

Returns the Unicode value of the character at a specified index:

const hello = 'hello world'
hello.charCodeAt(1) // returns: 101

includes

Checks if contains a specified value - returns a boolean:

const hello = 'hello world'
hello.includes('world') // returns: true

startsWith

Returns true if a string starts with a specified value:

const hello = 'hello world'
hello.startsWith('hello') // returns: true

endsWith

Returns true if a string ends with a specified value:

const hello = 'hello world'
hello.endsWith('world') // returns: true

slice

Returns a portion of a string based on start and end positions:

const hello = 'hello world'
hello.slice(0, 5) // returns: 'hello'

If the second argument is omitted, it will return the rest of the string:

hello.slice(1) // returns: 'ello world'

If the second argument is smaller than the first, will return an empty string:

hello.slice(2,1) // returns: ''

If the second argument is negative, will discount characters from the end:

hello.slice(5) // returns: 'world'
hello.slice(5,-2) // returns: 'wor'

toUpperCase and toLowerCase

Return strings with all the characters converted to uppercase or lowercase, respectively:

const hello = 'Hello World'
hello.toUpperCase() // returns: 'HELLO WORLD'
hello.toLowerCase() // returns: 'hello world'

replace

Replaces a specified value with another value:

const hello = 'hello world'
hello.replace('world', 'internet') // returns: 'hello internet'

trim

Removes whitespace from both ends:

const hello = ' hello world '
hello.trim() // returns: 'hello world'

split

Splits a string into an array of substrings based on a specified separator:

const hello = 'hello world'
hello.split(' ') // returns: ['hello', 'world']

padStart

Pads the start of a string with a specified value until the resulting string reaches a specified length:

const hello = 'hello'
hello.padStart(10, '#') // returns: '#####hello'

padEnd

Pads the end of a string with a specified value until the resulting string reaches a specified length:

const hello = 'hello'
hello.padEnd(10, '#') // returns: 'hello#####'

search

Searches for a specified value and returns the position of the match:

const str = 'The quick brown fox jumps over the lazy dog'
str.search(/dog/i) // returns: 40

Regular Expressions

Regular expressions (regex) are patterns used to match character combinations, often used in string methods such as match and search. Here are some common regex patterns:

/abc/ - matches the characters 'abc' in a string
/[abc]/ - matches any character in the brackets (a, b, or c)
/[^abc]/ - matches any character not in the brackets (not a, b, or c)
/[0-9]/ - matches any digit (0-9)
/[a-z]/ - matches any lowercase letter (a-z)
/[A-Z]/ - matches any uppercase letter (A-Z)
/./ - matches any character except newline
/\\\\s/ - matches any whitespace character (space, tab, newline)
/\\\\S/ - matches any non-whitespace character
/^abc/ - matches 'abc' at the beginning of a string
/abc$/ - matches 'abc' at the end of a string
/a*b/ - matches zero or more occurrences of 'a' followed by 'b'
/a+b/ - matches one or more occurrences of 'a' followed by 'b'
/a?b/ - matches zero or one occurrence of 'a' followed by 'b'
/a{2}/ - matches exactly two occurrences of 'a'
/a{2,}/ - matches two or more occurrences of 'a'
/a{2,4}/ - matches between two and four occurrences of 'a'

Take Away

Strings are an important data type, used to represent text and can be manipulated using various methods. They are immutable and any manipulation of a string will result in a new string being created.

DEV Community