JavaScript Strings

Posted on by Tiffany
JavaScript Strings

A string is a sequence of one or many characters which contain numbers or letters. The Javascript strings are primitive data types that can not be changed. This lesson will show you the main things related to Javascript strings. 

Create Javascript strings

Javascript strings are created in the following ways: single quotes, double quotes, and backticks. 

1. Single quotes and double quotes

Here is the example of single quotes and double quotes:

const firstname = 'Tiff';
const lastname = "Doan";

// The fullname are Tiff Doan
const fullname = `The fullname are ${firstname} ${lastname}`;

As you can see, single and double quotes are similar. You could pick one of them to use. 

2. Backticks

Backticks can be used during you want to get the variables in a string. You can wrap variables to complete it. 

Take a look at the illustrated example below. 

`The fullname are Tiff Doan`;

Javascript strings concatenation

String concatenation is a way of combining double or a lot of strings to make another string. You implement the operator displayed by the ‘+’ symbol to do it. Next, we will show you an example of string concatenation. 

Example:

const fullname = "Tiff" + "Doan";

Output:

TiffDoan

As for the case of space from the words “Tiff” to “Doan”, you should include a whitespace character like below. 

"Tiff " + "Doan";

Output:

Tiff Doan

Besides, combine variables with strings, including string values through concatenation. 

Example: 

const firstname = 'Tiff';
const lastname = "Doan";
const fullname = firstname + " " + lastname;
console.log(fullname);

Output

Tiff Doan

Escaping Quotes

Because quotation marks are applied to denote strings, some unique considerations can be created during having quotes of strings. Let’s follow this example to understand more about it. 

const msg = 'I'm Tiff Doan';
console.log(msg);

Output

Uncaught SyntaxError: Unexpected identifier 'm'

You need to use the three choices below to prevent the error from being used in those cases. 

1. Use the opposite string syntax

A simple solution to break strings is implementing the alternate string syntax. 

For instance, the apostrophes are created by “.

“I’m Tiff Doan”

const msg = "I'm Tiff Doan";
console.log(msg);

Quotation marks are created by ‘.

‘Hello, “How are you?”‘;

const msg = 'Hello, "How are you?"';
console.log(msg);

You could manage the quotation marks display by using both single and double quotes.

2. Implement the escape character

Use the backslash (\) to avoid Javascript from interpreting the quote. Then, you use apostrophes of strings created by “.

const msg = 'I\'m Tiff Doan';
console.log(msg); // I'm Tiff Doan

Besides, you might use quotation marks of strings with “.

const msg = "Hello, \"How are you?\""; 
console.log(msg); // Hello, "How are you?"

3. Use template literal

Backticks can assign template literals. Thus, apostrophes and quotes are used conveniently.

const msg = `Hello, I'm Tiff. "How are you?"`;
console.log(msg); // Hello, I'm Tiff. "How are you?"

Javascript strings are case-sensitive

The uppercase and lowercase letters can be considered as various values. Let’s see the example below for further details.

const str1 = 't';
const str2 = 'T'
console.log(str1 === str2); // false

Based on the example above, ‘T’ and ‘t’ are different.

Strings are immutable

Javascript strings consist of characters that are not changed. Look at the example below.

let name = 'tiff';
name[0] = 'T';
console.log(name); // tiff

On top of it, you might assign the variable name to another string. For instance,

let name = 'tiff';
name = 'Tiff';
console.log(name); // Tiff

Newlines and long strings

Sometimes, you can add a newline character in the string. To add a new line, the \n or \r escape characters might be supported.

const msg = "Hello\nMy name is Tiff Doan\nWellcome to LearnShareIT";
console.log(msg);

Output

Hello
My name is Tiff Doan
Wellcome to LearnShareIT

Next, when writing a long string on the line, you might implement the concatenation operator to display the string through multiple lines.

const msg = "Hello\n" +"My name is Tiff Doan\n" + "Wellcome to LearnShareIT";
console.log(msg);

To escape the newline, you have to use the \

const msg = "Hello\n\
My name is Tiff Doan\n\
Wellcome to LearnShareIT";

console.log(msg);

You must apply the literal template strings to make your code easy to read. They can remove the demand for concatenation. Let’s see the example below to realize that the string and newlines can be preserved.

const msg = `Hello
My name is Tiff Doan
Wellcome to LearnShareIT`;

console.log(msg);

Output

Hello
My name is Tiff Doan
Wellcome to LearnShareIT

String values and literal

You can realize that the strings you write from the code can be wrapped in the backticks. However, the real result can not consist of quotations.

"My name Tiff Doan";

Output

My name Tiff Doan

As you can see, there will be a difference during you refer to each of them. The string value is what you see in the result and might not consist of quotations. On the contrary, the string literal is the string when it is used for writing in the code, such as quotations.

In this case, My name Tiff Doan is the string value, whereas “My name Tiff Doan” is the string literal.

Methods in Javascript strings

We will show you popular Javascript string methods below.

Concat()

Syntax: string.concat(string1, string2, ..., stringX)

Parameters: 

  • String1: Required
  • String2: strings are joined
  • …
  • StringX

This method will return a new string consisting of the mixed strings. 

toUpperCase()

Syntax: string.toUpperCase()

Parameters: None

It will return the passed string in the upper case. 

trim()

Syntax: string.trim()

Parameters: None

It will clear whitespace from the strings. 

split()

Syntax: string.split(separator, limit)

Parameters: 

  • Separator: A string is used for splitting and is optional. 
  • Limit: An integer that can limit the splits’ number. 

This method will return an array consisting of split values. 

slice()

Syntax: string.slice(start, end)

Parameters: 

  • Start: A start position (required)
  • End: An end position (optional)

It will return a string’s part.

padStart()

Syntax: string.padStart(length [, pad_string]);

  • length: The length of the resulting string you want after adding the characters
  • pad_string: is a padding character at the beginning of the string, defaults to a space, optional and can be omitted.

Returns a string of the desired length after padding the string at the beginning.

substring()

Syntax: string.substring(start, end)

  • start: required parameter, is the starting position to get the character in the string you want
  • end: optional parameter, is the end position to get the character.

Returns a string/characters in the string at the specified position.

replace()

Syntax: string.replace(searchValue, newValue)

  • searchValue: is the string you want to change
  • newValue: is the value you replace for searchValue

Returns a new string after searchValue has been replaced by the desired value.

Javascript Strings Articles

Summary

After browsing all around this lesson, we make sure that you walk through the fundamental things of Javascript strings. Last but not least, if you have any related queries, please feel free to drop your feedback below this post. Thank you so much for caring.

Related Posts

Leave a Reply

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