DEV Community

Charlie @ 90-10.dev
Charlie @ 90-10.dev

Posted on • Originally published at 90-10.dev on

JavaScript Data Types: String

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.'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

String Methods

length

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

const hello = 'hello world';
hello.length // Returns: 11
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

lastIndexOf

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

const hello = 'hello world'
hello.lastIndexOf('o') // returns: 7
Enter fullscreen mode Exit fullscreen mode

charAt

Returns the character at a specified index:

const hello = 'hello world'
hello.charAt(1) // returns: 'e'
Enter fullscreen mode Exit fullscreen mode

charCodeAt

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

const hello = 'hello world'
hello.charCodeAt(1) // returns: 101
Enter fullscreen mode Exit fullscreen mode

includes

Checks if contains a specified value - returns a boolean:

const hello = 'hello world'
hello.includes('world') // returns: true
Enter fullscreen mode Exit fullscreen mode

startsWith

Returns true if a string starts with a specified value:

const hello = 'hello world'
hello.startsWith('hello') // returns: true
Enter fullscreen mode Exit fullscreen mode

endsWith

Returns true if a string ends with a specified value:

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

Enter fullscreen mode Exit fullscreen mode

slice

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

const hello = 'hello world'
hello.slice(0, 5) // returns: 'hello'
Enter fullscreen mode Exit fullscreen mode

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

hello.slice(1) // returns: 'ello world'
Enter fullscreen mode Exit fullscreen mode

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

hello.slice(2,1) // returns: ''
Enter fullscreen mode Exit fullscreen mode

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

hello.slice(5) // returns: 'world'
hello.slice(5,-2) // returns: 'wor'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

replace

Replaces a specified value with another value:

const hello = 'hello world'
hello.replace('world', 'internet') // returns: 'hello internet'
Enter fullscreen mode Exit fullscreen mode

trim

Removes whitespace from both ends:

const hello = ' hello world '
hello.trim() // returns: 'hello world'
Enter fullscreen mode Exit fullscreen mode

split

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

const hello = 'hello world'
hello.split(' ') // returns: ['hello', 'world']
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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#####'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)