JavaScript Data Types: String
Tags: javascript
Published: 2023-03-03 16:33:09

---
title: JavaScript Data Types: String
published: true
date: 2023-01-07 18:00:00 UTC
tags: JavaScript
canonical_url: https://www.90-10.dev/js-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.'
```

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.