How to use a line break in array values in JavaScript?

We use the join() method of JavaScript to use a line break in array values. It allows us to concatenate all the constituent elements of an array into a single string using a common separator.

The join() method in JavaScript

The join() method takes as input a single separator string and returns a string with all the elements of the array separated by the specified separator string. The separator string by default is the comma(,).

The join method uses the toString() method to convert the elements of the array into corresponding strings. A null or undefined value is converted to an empty string.

Syntax

var str = arr.join(separator)

Here arr is an array, str is a string and separator is the user-fed separator string. Note that the separator is optional. If no argument is provided, then the comma operator is assumed as the default by JavaScript.

Example 1

Here we are going to show the use of join method. We will create an array of strings and pass it as a function argument for printing it also providing the separator string. Let’s look at the code for same.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3> The join() method in JavaScript:<br> </h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      function print(arr, separator) {
         var text = arr.join(separator)
         document.getElementById("result").innerHTML = text;
      }
      var arr = ["first", "second", "third"]
      var separator = "<br>"
      print(arr, separator)
   </script>
</body>
</html>

In the above code, every array element is separated by a newline character. Note however that we are using the "<br>" for putting newlines instead of the escape sequence character "
". This is because we show the output using innerHTML instead of a conventional string.

A string provided with a sentinel character or string for newline can be split into a corresponding array and then merged to create the required string embedded with newline characters.

Let us look at an example to see this use case.

Example 2

We will create an array of strings from the provided single string and then merge them back to a single string using the join method providing the desired separator string.

<!DOCTYPE html>
<html>
<head>
   <title> A line break in array values in JavaScript </title>
</head>
<body>
   <h3> The join() method in JavaScript:<br> </h3>
   <p>
      <div id="result"> </div>
   </p>
   <script>
      function print(str, separator) {
         var arr = str.split('#')
         var text = arr.join(separator)
         document.getElementById("result").innerHTML = text;
      }
      var str = "first#second#third"
      var separator = "<br>"
      print(str, separator)
   </script>
</body>
</html>

Here we first split using the split() method and them join the array separated by newline characters using the join() method.

The join method can also be called for non-array objects. The method only expects a length property and integer accessible indices.

However, it has slightly different syntax from the conventional join.

Syntax

var str = Array.prototype.join.call(arrayLikeObject, separator)

The first argument is the array like object and the second argument is the separator string. Again the second argument is optional, comma (,) being the default value.

Here’s an example −

Example 3

Here we are going to create an array like objects with length property and integer indexed elements. Let’s see the working of join operator on the concerned object.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <p>The join() method in JavaScript:<br>
      <div id="result"> </div>
   </p>
   <script>
      function print(obj, separator) {
         var text = Array.prototype.join.call(obj, separator)
         document.getElementById("result").innerHTML = text;
      }
      const obj = {
         length: 4,
         0: "first",
         1: "second",
         2: "third",
         3: "fourth",
      };
      var separator = "<br>"
      print(obj, separator)
   </script>
</body>
</html>

The join method first of all reads the length of the object. It then iterates on that many elements and joins them using the provided separator string.

Note however that if the length provided is shorter that the number of elements in the object, then only that many elements are joined. for example, in the code above, if we provided length as 3, then only first 3 elements would have been joined.

Conclusion

The join operator is pretty useful for merging arrays or array like objects into a single string. It is a generic method.

Updated on: 10-Nov-2022

10K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements