Study Smart, Not Hard. - StudyMuch

JavaScript String

Published by StudyMuch on

JavaScript String studymuch.in

JavaScript String

In this article we will learn about the JavaScript String, how to create string, Single or Double quotes in string, concatenating String and Concatenation Contextual with programming examples. So, let’s start the learning.

What is JavaScript String?

In JavaScript, Strings are piece of text, a string is set of characters in quotes. Simple you can say String is a sequence of one or more characters that may consist of letters, number, or symbols. Strings in JavaScript are primitive data types and immutable, which means they are unchanged.

Creating String

In JavaScript String can be created simple using enclosed in single (‘) and double (“) quotes. See below programming examples using double and single quotes.

Programming Example using Double Quotes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
  <title>JS String</title>
</head>
<body>
    <!-- Using double quotes. -->
    <script>
        var name = "Shubham Verma";
        document.write(name);
    </script>
</body>
</html>

Above programming example, you can see, we used double quotes to write the string elements.

Programming Example using Single Quote.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
  <title>JS String</title>
</head>
<body>
  <!-- Using single quotes. -->
  <script>
      var name = 'Shubham Verma';
      document.write(name);
  </script>
</body>
</html>

Above programming example, you can see we used single quote to write the string elements.

Single or Double Quotes

Where we can use single or double quotes, how we know where to use single quote or double quotes, so simple Use single quotes if your string contains double quotes. And use double quotes if your string contains single quotes. See below programming examples to better understanding.

Programming Examples Single or Double Quotes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
    <title>JS String</title>
</head>
<body>
  <p id="show"></p>
   <script>
      var char = "we'll go today"
      var char1 = "we live in 'Mumbai'"
      var char2 = 'we live in "Mumbai"'
      document.getElementById("show").innerHTML=
      char + "<br>" +
      char1 + "<br>" +
      char2;
   </script>
</body>
</html>

Output:

JavaScript String studymuch.in

Above you can see programming example with output, when we use single quote in our sentence like ‘Mumbai’ then we use double quotes to create string, and when we use double quotes in our sentence like “Mumbai” then we use single quote to create string.

Concatenating Strings

Concatenating String means simple to concatenate or add strings, using the addition operator (+), you can add two or more string. See below programming example to understand better.

Programming Example of Concatenating String using (+).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, 
   initial-scale=1.0">
   <title>JS String</title>
</head>
<body>
  <p id="show"></p>
   <script>
     var char = "Hello"
     var char1 = "World"
     var sent = char + " " + char1;
     document.getElementById("show").innerHTML= sent;
   </script>
</body>
</html>

Output:

JavaScript Strings studymuch.in

Above programming example, you can see we add two string using Addition Operator (+).

We can also concatenate string using the addition assignment operator (+=), see below programming example.

Programming example to add string using (+=).

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, 
   initial-scale=1.0">
   <title>JS String</title>
</head>
<body>
  <p id="show"></p>
   <script>
     var char = "Hello"
         char += "World";
     document.getElementById("show")
     .innerHTML= char;
   </script>
</body>
</html>

Above you can see, we add two strings with using addition assignment (+=) operator.



Concatenation Contextual Example

In this example, we will create a program that greets the user by concatenation strings. Here we also use the window.prompt() to ask user’s name. see below programming example to better understanding.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, 
   initial-scale=1.0">
   <title>Adding String</title>
</head>
<body>
  <button onclick="showing()">Click to Advanture</button>
   <script>
     function showing(){
     var name = window.prompt("Hello Programmer! 
     Who are you?");
     var sent = "Nice to meet you " + name + "!" + " 
     Welcome to StudyMuch.";
     alert(sent) }
    </script>
</body>
</html>

Output:

Greet String JavaScript

Greeting JS Strings studymuch.in

If you run above programming example, alert box is launched then enter the value, the entered value on the prompt was assigned to the name variable. And then we applied concatenation to form a short greeting.

So, in this tutorial you learned about the JavaScript String, we cover all the points like how to create the string, concatenation string, single and double quotes etc. I hope you guys, you read this tutorial better and learn something new. If you have any doubt, you can ask in the comment section.

Read Also


2 Comments

gate io borsası · May 8, 2023 at 3:50 pm

Your article made me suddenly realize that I am writing a thesis on gate.io. After reading your article, I have a different way of thinking, thank you. However, I still have some doubts, can you help me? Thanks.

gate io borsası · May 11, 2023 at 12:07 am

At the beginning, I was still puzzled. Since I read your article, I have been very impressed. It has provided a lot of innovative ideas for my thesis related to gate.io. Thank u. But I still have some doubts, can you help me? Thanks.

Leave a Reply

Avatar placeholder

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