Strings in JavaScript

As a rule of thumb, you can’t attach a method or a property to a primitive value. However, in JavaScript, primitive values are treated as objects – thus, you can add properties and methods to them.

In JS, a primitive value is called a string. You can wrap strings with helper methods. In this post, you’ll find out how to create and manipulate strings. The post will also review the most useful string functions.

Creating strings

Strings are encoded text characters like ‘John Doe’. To declare a string, enter the following code:

const val= new String(string)

All strings have three fundamental properties:

  • Length. By entering string.length, a developer can find out how many characters a string has.
  • Constructor – the property will return a developer to the function that was used to create a prototype. string.constructor is the syntax of the property.
  • Prototype. The property allows assigning methods and properties to a string. Developers can use string.prototype to assign a date, a boolean, a number, etc. Prototypes have multiple methods for string management.

Using escape characters

If a string has text in quotes – such as in the sentence ‘It was a so-called “winter” here’, the following syntax will not be read properly:

const x = "It was a so-called "winter" here."

Because developers use quotes to create strings, in the example above, only the ‘It was a so-called’ part will be interpreted as a string. 
To make sure the system understands your strings correctly, you backslash escape characters \. This symbol is used to convert special characters into strings. Here’s how you can use backslash escape characters to display different quote types:

Look in the codeDescriptionUser’s point-of-view
\’Single quote
\”Double quote
\\Single backlash\

The entire string will have the following look:

const x = “It was a so-called \“winter\” here.”

Displaying special characters is not the only use backslash characters have in JavaScript. Here are other sequences escape symbols are needed for:

  • \b – backspace
  • \n – creates a new line
  • \f – calls the form feed
  • \t – horizontal tabulator
  • \v – vertical tabulator
  • \r – carriage return

Although knowing the commands listed broadens your skillset as a developer, they are never used in web page development. These sequences were designed to control faxes and typewriters.

Top JavaScript String Methods

There are multiple ways to manipulate strings in JavaScript. Developers can call models to find a string within a string, extract strings, and perform multiple other day-to-day actions. Let’s take a closer look at the most widely used methods for controlling strings.

indexOf()

This method is used to determine a position of the specified text inside the string. Keep in mind that the method pinpoints the first time the characters a developer specified were used.

Here’s how the method looks in the code syntax.

string.indexOf(searchValue)

You can insert a [fromIndex] to the argument as well to specify which string you want to find a fragment in.

lastIndexOf()

This method returns the last occurrence of a specified symbol in a string. You can either specify the location of the search by adding a [fromIndex] argument or leave it at the default -1.

The general look of the method goes as follows:

string.lastIndexOf(search value)

The output of the method will be the last occurrence of a character in a string.

concat()

Developers use the method to combine several strings into a single one. In the parentheses, specify the strings you want to merge. As the output of the method, a developer gets a single concatenated string.

string.concat(string1, string 2, stringN)

The final string will be preceded by the Concatenated String : prefix.

localeCompare()

This method is used to compare a string to its reference string and determine whether it comes before, after, or is the same as the reference object. There are three types of outputs a developer will get after calling the method:

0 – two strings match fully

1- strings don’t match, the parameter value precedes the object value

-1 – strings don’t match, the parameter value follows the object value.

Here’s the way localeCompare() looks in the code:

string.localeCompare(param)

Param is a string a developer wants to compare to the string object.

search()

This method allows developers to look for matches between String objects and regular expressions. The method argument is regexp – a regular expression object. If a developer wants to search for matches between the string and a non-expression object obj, you will have to convert the object to regular expression using new RegExp(obj).

The overall syntax of search() has the following looks:

string.search(regexp)

replace()

The method is used to match strings and regular expressions and replacing a string that matched with a new substring. The method can replace strings following five main patterns:

  • $$ – inserts $
  • $& – inserts a substring into the string
  • $` inserts the part of the string that precedes the matched string fragment
  • $’ – inserts the part of the string that follows the matched string fragment
  • $nn ($n) – inserts the parenthesized match nth string. nn and n are decimal digits.

In the code, the method has the following look:

string.replace(regexp/substr , newsubstr/function)

toString()

A developer can find a string that contains a specified object using toString(). Pay attention that the method is different from search() as it looks through all created strings to pinpoint a specified object. 
The return value will not be the object a developer specified by the full string that contains it. Here’s the way toString() syntax can be applied:

string.toString() – the argument is the object a developer chooses.

charAt()

This method returns a specified character from a chosen index. The string is indexed left-to-right. The first character in the string is marked as 0, the last one is a -1.

Take a look at the way charAt() is applied to a string.

string.charAt(index)

The output of the method will be the character that corresponds to the index.

charCodeAt()

Syntaxwise, the method is similar to charAt(). The difference is that charCodeAt() returns the UTF number of the character a developer specified. charCodeAt() will return UTF values up to 65,536 – there are over a million of all UTF codes.

Take a look at the way to apply charCodeAt() in JavaScript:

string.charCodeAt(index) where index is an integer that specifies the placement of any symbol of the string.

Conclusion

JavaScript strings help extend the functionality of the programming language, giving developers more opportunities. Getting the hang of them is not easy since there are multiple methods and HTML methods developers should memorize. The good news is, once you learn to handle strings, you will use this knowledge in every development project – as a result, memorizing methods, properties, and wrappers through repetition will not be too challenging.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top