DEV Community

loading...

JavaScript String Methods You Probably Haven’t Heard Of and that's Okay

Mahmoud Elmahdi
Lead Software Engineer w/ a Designer's State of Mind
・3 min read

OCTOPAL

Overview

Strings are JavaScript’s data type for representing text that can contain letters, numbers, symbols, punctuation, and even emoji. They consist of zero or more (16‑bit values) characters surrounded by either single ' or double " quotation marks.

It’s not rocket science! nothing special about the previous introduction, but it’s always good to refresh up. Believe or not, there’s tons of developers out there that have no clue about every single JavaScript predefined method, most of us feels like “am okay” with the informations that got stuck in our heads. For instance, almost all of us knows that to get the first character of a string we go like str[0] which is totally okay. In this article am going to cover 5 JavaScript Methods that you probably have or haven’t heard of, w/ examples.

String Methods & Properties

Since a String is one of the primitive values, for instance 'Mask Off' can not have properties or methods. Fortunately JavaScript defines several properties and methods to invoke on strings. These properties and methods are accessed using dot notation.

Strings are immutable in JavaScript; and can be treated like read-only arrays. All string methods return a new value and they do not modify the string on which they were invoked.


Examples Setup

Before we digginto further details, let’s first setup a block that can we can use through all examples:

const content = "Forem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronics typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumL";

const { length }  = content;    // 500 characters
const firstChar   = 0;          // F
const lastChar    = length - 1; // L
const midContent  = length / 2; // e
const outOfRange  = length * 2; // ""
Enter fullscreen mode Exit fullscreen mode

charAt() Method

The charAt() method returns the character at the specified index, or an empty string if index is out of range. If no index-param is provided, the default is 0.

/**
 * @param  {number} ranges from 0 to the length of the string -1
 * @return {string}
 */
string.charAt(index)
Enter fullscreen mode Exit fullscreen mode

charAt() example

content.charAt() // "F"
content.charAt(firstChar)  // "F"
content.charAt(lastChar)   // "L"
content.charAt(midContent) // "e"
content.charAt(outOfRange) // ""
Enter fullscreen mode Exit fullscreen mode

startsWith() Method

The startsWith() method determines whether a string begins with the characters of a specified string.

/**
 * @param  {string} string to search for
 * @param  {number} optional - index, defaults to 0
 * @return {boolean}
 */
string.startsWith(string, position)
Enter fullscreen mode Exit fullscreen mode

The startsWith() method is case sensitive.

startsWith() example

content.startsWith('F') // true
content.startsWith('f') // false
content.startsWith('e', midContent) // true
Enter fullscreen mode Exit fullscreen mode

endsWith() Method

The endsWith() method determines whether a string ends with the characters of a specified string. otherwise it returns false

endsWith() example

content.endsWith('L', lastChar) // true
content.endsWith('l', lastChar) // false
Enter fullscreen mode Exit fullscreen mode

includes() Method

The includes() method lets you determine whether or not a string includes another string, returning Boolean

/**
 * @param  {string} string to search for
 * @param  {number} optional - index, defaults to 0
 * @return {boolean}
 */
string.includes(string, position)
Enter fullscreen mode Exit fullscreen mode

includes() example

content.includes('Ipsum') // true
content.includes('1960s') // true
content.includes('Hello from outside') // false
Enter fullscreen mode Exit fullscreen mode

repeat() method

The repeat() method constructs and returns a new string with a specified number of copies of the string it was called on, concatenated together.

/**
 * @param  {number} - indicating the number of times to repeat
 * @return {string}
 */
string.repeat(count)
Enter fullscreen mode Exit fullscreen mode

repeat count must be: non-negative, less than infinity and not overflow maximum string size.

repeat() example

"**".repeat(3)  // "******"
"😺".repeat(3)  // "😺😺😺"
Enter fullscreen mode Exit fullscreen mode

Sum up; the methods mentioned above could be implemented with another approaches, they might be harmful in performance or they be the fastest choice! by the end of the way the result will depend on your needs.

For more detailed look at all available properties and method
I highly recommend reading the full JavaScript String Reference.

Discussion (1)

Collapse
nektro profile image
Meghan (she/her)

Great write up! Didn’t actually know about .repeat 🤔

Forem Open with the Forem app