Date:

Share:

JavaScript “sub-string” | Code Underscored

Related Articles

Strings are frequently used in everyday programming. Fortunately, JavaScript has many built-in methods that help us work with arrays, strings, and other types of data. These methods can be used for various tasks such as searching, exchanging, stringing strings, etc.

Data manipulation is an essential component in any online application. In addition, various methods for analyzing and extracting data are available in JavaScript.

What is a JS Substring?

A sub-string is a string that is part of another string.

One of the most popular actions in JavaScript is extracting a sub-string from another string. substring (), substr () and slice () are JavaScript methods for extracting strings from a larger string.

We will learn how to obtain a sub-string using the three built-in methods distinguished in this article.

The sub-method ().

Let’s first look at the substring () technique.

  • This technique extracts some of the original string and replaces it with a new string
  • Two parameters are required in the sub-method
  • substring () is supported by all browsers and is a JavaScript ES1 feature introduced in 1997
  • The substring () function pulls characters from a string and returns the string between two metrics (positions)
  • The substring () method deletes characters from the beginning to the end of a string (exclusive)
  • The original string is not modified by the substring () technique.
  • If the beginning is larger than the end, the two arguments will be replaced, (4, 9) = (9, 4)
  • Start and end are considered 0 if they are less than 0

Some more considerations:

The sub-string method causes an empty string if startIndex = endIndex. It returns an empty string if startIndex and endIndex are larger than the length of the string.

Example:

let text = "Hello Codeunderscored!";
console.log(text.substring(24, 30))
The start and the last index are larger than the string

Substore syntax

string.substring(start, end)

Now, let’s define the parameters in the syntax above.

start

  • It indicates the starting point where to start extraction. Typically, index 0 is the index of the first character.

end

  • It is optional to have the end parameter
  • This location indicates the stopping point of the rescue. However, it usually reaches this value but does not include. If the chance is dropped, then that’s the rest of the string.

It is important to note that the JavaScript sub string has a return value that represents the new string with the extracted characters.

As shown in the example below, any non-numeric value (NaN) is treated as zero.

const str = "Codeunderscored is simply scaling the heights!";
console.log(str.substring('start', 3));
No patient number as zero
A number refers to zero

The ‘Start’ argument in the example above is not a number. As a result, the generated string starts at a zero position of str. In addition, the substring () function returns a copy of the string it is running on if no arguments are provided and both parameters are omitted.

Example 1: Extracting a string starting from the third position

let text = "Hello Codeunderscored!";
console.log(text.substring(3));
Starting from 3rd place
Example 1: Starting from third place

Example 2: A sub-string when the start point is larger than the end

If startIndex is more than endIndex, the sub-string method replaces the arguments and returns a sub-string, assuming the endIndex is larger than startIndex.

let text = "Hello Codeunderscored!";
console.log(text.substring(30, 4))
Sub-string when the starting point is larger than the end
Sub-string when the starting point is larger than the end

Example 3: In case the starting point is negative (less than 0), reset the starting index to 0:

let text = "Hello Codeunderscored!";
console.log( text.substring(-2));
Sub-string if the starting point is negative
Sub-string if the starting point is negative

Example 4: Extract the first value From a string

let text = "Hello Codeunderscored!";
console.log( text.substring(0, 1));
Extract the first value from a string
Extract the first value from a string

Example 5: How to extract the last value In the given string

let str = "Hello Codeunderscored!";
console.log(str.substring(str.length – 1));
Extract the last character in the string
Extract the last character in the string

Substrate method ()

According to Mozilla’s documentation, the substr () method is a previous generation function that should not be used. However, we will explain what this does because it may appear in some previous projects, or you may find it useful.

The substr () method returns a sub-string of the original string and requires the following two parameters:

string.substr(startIndex, length);
  • startIndex: Specifies the starting point of the sub-length
  • Length: The total amount of characters to include (optional)

The difference with substring () is that the subst () method expects length instead of endIndex as the second parameter:

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";

myString.substr(2,4)
Example of using substr
Example of using substr

This example counts four characters beginning with the provided startIndex (2) and returns them as a sub-string.

If the second parameter is not set, it returns to the end of the original string (similar to the previous string method). The following is an example.

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";

myString.substr(4)
Using substr when only one parameter is provided
Using substr () when only one parameter is provided

Slice method ()

Similar to the substring () method, the slice () method returns a sub-string of the original string. Moreover, the same two parameters are required in the slice method:

string.slice(startIndex, endIndex);
  • startIndex: Indicates the beginning of the sub-string.
  • endIndex: This is the endpoint of the string and is optional most of the time.

Similarities between the substring () and slice () methods.

Here are some of the similarities between the substring () and slice () methods.

We will get a sub-string from the index number specified to the end of the original text if we do not define an end index as shown below.

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";

myString.slice(14)
Providing one parameter to the slice method
Providing one parameter to the slice method

If we set both startIndex and endIndex, we get the characters in the original text between the specified index numbers:

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";

myString.slice(2, 14)
Provides a start and end index for the slice method
Provides a start and end index for the slice method

An empty string is returned if startIndex and endIndex are larger than the length of the string.

Differences between slice () and other methods:

An empty string is returned by the slice () method if startIndex> endIndex.

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";
The slice method returns an empty string if the start index is greater than the end index
The slice method returns an empty string if the start index is greater than the end index

If startIndex is a negative value, the first character in the string is called from the end (inverse):

const myString = "I am learning JavaScript on Codeunderscored.com, and it is cool!";

myString.slice(-5)
Supply a negative parameter to the slice method
Supply a negative parameter to the slice method

Summary

These are the three methods for obtaining a string in JavaScript. They consist of substring (), substr () and slice () methods used to extract strings from a larger string.

substring () is a built-in JavaScript function that returns part of a string from the start index to the end index. Here, the indexing process starts at zero. Essentially, substring () is used to return a string segment, starting with the index provided and continuing to a specified number of characters afterwards.

Other built-in JavaScript methods are useful when dealing with various aspects of programming such as slice () and substr ().

We hope you found this article helpful. If so, share your thoughts with us.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles