在 JavaScript 中将数组转换为字符串
数组是你在日常编程生活中可能使用的最常见和最灵活的数据结构。由于你可以使用 JavaScript 编程语言提供的大量数组方法,因此你可以轻松地操作数组并执行你想要执行的任何操作。
同样,在预定义方法的帮助下并遵循一些其他方式,也可以轻松地将数组转换为字符串。在本文中,我们将看到将整个数组数据结构(即该数组中存在的所有元素)转换为单个字符串的不同方法。
将数组转换为字符串的最简单方法是使用 JavaScript 中名为 toString()
的预定义方法。此方法不仅适用于数组,还适用于各种其他数据类型。几乎任何东西都可以使用 toString()
转换为字符串。
你可以将它添加到数组的末尾以使用此方法,如下所示。它将获取该数组中的所有元素并将它们连接为单个字符串。
var arr = ['Google', 'is', 'no', '1', 'search engine'].toString();
console.log(arr);
输出结果:
"Google,is,no,1,search engine"
在这里,如果你看到输出,它是一个字符串,但以逗号分隔。现在,如果你想从上面的字符串中删除逗号,你可以使用 replace()
方法,如下所示。replace()
方法有两个参数。第一个参数是需要替换的字符本身(在这种情况下,逗号,用/,
表示),第二个参数决定用什么来替换字符(在这种情况下是空格)。/
是转义字符。
arr.replace(/,/g," ")
输出结果:
"Google is no 1 search engine"
在这种情况下,我们希望从字符串中删除所有逗号,用 /g
表示。
另一种将数组转换为字符串的方法是使用 join()
方法。此方法将从数组中取出每个元素并一起形成一个字符串。在这里,如果直接将此方法用于类似于 toString()
的数组,它也会生成一个以逗号分隔的字符串。
但是在这里,你不需要使用任何其他方法,例如 replace()
,因为你可以直接传递任何其他分隔符作为参数来分隔字符串中的元素。
var arr_1 = ['Google', 'is', 'no', '1', 'search engine'].join();
var arr_2 = ['Google', 'is', 'no', '1', 'search engine'].join("-");
var arr_3 = ['Google', 'is', 'no', '1', 'search engine'].join("##space##");
console.log(arr_1);
console.log(arr_2);
console.log(arr_3);
输出结果:
"Google,is,no,1,search engine"
"Google-is-no-1-search engine"
"Google##space##is##space##no##space##1##space##search engine"
JSON.stringify()
方法允许你将任何 JavaScript 对象或值转换为字符串。这更干净,因为它引用数组内的字符串并正确处理嵌套数组。此方法最多可以采用以下三个参数。
JSON.stringify(value, replacer, space)
value
参数采用任何需要转换为字符串的值。该参数是必须通过的。replacer
是一个函数,你可以通过它来替换字符串中的某些元素。如果你想在输出字符串中添加空格以提高可读性,你可以使用 space
参数。replacer
和 space
这两个参数都是可选的。
var arr = JSON.stringify(['Google', 'is', 'no', '1', 'search engine']);
console.log(arr);
输出结果:
"[\"Google\",\"is\",\"no\",\"1\",\"search engine\"]"
在上面的例子中,我们肯定要使用替换函数,因为我们上面得到的输出是不可读的。JSON.stringify()
方法直接获取数组的各个元素并将它们转换为字符串,包括其结构。
将数组转换为字符串的最后一种方法是使用类型强制。类型强制是将值从一种类型转换为另一种类型的过程。JavaScript 中有两种类型的强制转换,隐式强制和显式强制。
隐式强制是当你将各种运算符(+、-、’ ‘、/ 等)应用于不同类型的值时,显式强制是当你使用诸如 String()
、Number()
之类的函数时。两种类型强制的示例如下所示。
var str_1 = ['This', 'is', 11, 'clock'] + '';
var str_2 = String(['This', 'is', 11, 'clock']);
console.log(str_1);
console.log(str_2);
输出结果:
This,is,11,clock
This,is,11,clock
str_1
是隐式强制转换的一个例子,我们只是在两种不同类型的值(一个是数组,另一个是字符串)之间使用运算符。此操作的结果输出是一个字符串。str_2
是显式强制转换的一个例子,我们刚刚在 String()
函数中传递了整个数组,以将数组转换为字符串。
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。