Home Web Front-end JS Tutorial Detailed graphic explanation of two methods of converting arrays to strings in JavaScript

Detailed graphic explanation of two methods of converting arrays to strings in JavaScript

Oct 09, 2018 pm 02:22 PM

JavaScript is often used in front-end development, so do you know how to convert a JS array into a string? This article will tell you about the method of converting JS array objects to strings. Friends who are interested can refer to it. I hope it can help you.

1. Join converts an array into a string

The join() method can convert all elements in the array into a string, and all major browsers Support join() method.

Example: Define an array, click the button to convert the array into a string, and display the type and result on the page.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title></title>

 </head>

 <body>

  <p id="demo">点击按钮将数组转为字符串</p>

  <button onclick="myFunction()">点击</button>

 </body>

 <script type="text/javascript">

  function myFunction(){

   var animal = ["dog", "cat", "elephant", "tiger"];

   var str=animal.join(&#39;&#39;);

   document.write("类型是:"+typeof(str)+",字符串是:"+str);  

  }

 </script>

</html>

Copy after login

Rendering:

Detailed graphic explanation of two methods of converting arrays to strings in JavaScript

The join() method can set different delimiters to separate the content in the string. For example, join(‘/’) can achieve the following effects.

Rendering:

Detailed graphic explanation of two methods of converting arrays to strings in JavaScript

2. toString converts the array into a string

toString() method also Array objects can be converted to strings, and all major browsers support the toString method, but it cannot set delimiter styles.

Example: Define an array, click the button to convert the array into a string, and display the type and result on the page.

1

2

3

4

5

6

7

<script type="text/javascript">

  function myFunction(){

   var animal = ["dog", "cat", "elephant", "tiger"];

   var str=animal.toString();

   document.write("类型是:"+typeof(str)+",字符串是:"+str);  

  }

 </script>

Copy after login

The effect of the toString() method is the same as the picture above.

The above introduces two methods to convert JS arrays into strings, one is the join() function method, and the other is the toString method, but the join() method can set the style of the separator, and the toString method The default is comma delimiter. The specific method you choose at work depends on your personal habits and project needs. Beginners can try it by themselves. I hope this article will be helpful to you! For more related tutorials, please visit JavaScript Video Tutorial php Public Welfare Training

The above is the detailed content of Detailed graphic explanation of two methods of converting arrays to strings in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to remove duplicate elements from PHP array using foreach loop? How to remove duplicate elements from PHP array using foreach loop? Apr 27, 2024 am 11:33 AM

How to remove duplicate elements from PHP array using foreach loop?

PHP array key value flipping: Comparative performance analysis of different methods PHP array key value flipping: Comparative performance analysis of different methods May 03, 2024 pm 09:03 PM

PHP array key value flipping: Comparative performance analysis of different methods

PHP array multi-dimensional sorting practice: from simple to complex scenarios PHP array multi-dimensional sorting practice: from simple to complex scenarios Apr 29, 2024 pm 09:12 PM

PHP array multi-dimensional sorting practice: from simple to complex scenarios

The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy May 01, 2024 pm 12:30 PM

The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Apr 30, 2024 pm 03:42 PM

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods

Application of PHP array grouping function in data sorting Application of PHP array grouping function in data sorting May 04, 2024 pm 01:03 PM

Application of PHP array grouping function in data sorting

The role of PHP array grouping function in finding duplicate elements The role of PHP array grouping function in finding duplicate elements May 05, 2024 am 09:21 AM

The role of PHP array grouping function in finding duplicate elements

PHP array merging and deduplication algorithm: parallel solution PHP array merging and deduplication algorithm: parallel solution Apr 18, 2024 pm 02:30 PM

PHP array merging and deduplication algorithm: parallel solution

See all articles