如何在javascript中把数组转换为字符串？

迪鲁宾
216 阅读2分钟

在应用程序开发过程中，从REST API检索的记录数据列表在javascript中是以记录数组的形式出现。

让我们假设Permissions REST API在一个应用程序中返回用户的权限列表，例如以下是API返回的权限数组。

let array=["READ","WRITE", "DELETE","UPLOAD"];

这篇文章讲述了我们如何在javascript/Angular中把数组转换为字符串？

将数组转换为字符串

我们有多种方法可以将数组输出为字符串

使用数组地图与连接方法

  • 内置地图与字符串连接方法
  • 在下面的例子中使用了数组映射方法。
  • map对每个元素进行迭代，应用回调。
  • 使用字符串的join方法追加每个元素
  • join方法接受一个字符串，并将其附加到它上面。

下面这行代码用逗号转换为字符串

let stringwithcomma=array.map(element=>element).join(",")
console.log(stringwithcomma) //READ,WRITE,DELETE,UPLOAD
```javascript

converted string contains hypen separated for below line of code
```javascript
let stringwithhyphen=array.map(element=>element).join("-")
console.log(stringwithhyphen)//READ-WRITE-DELETE-UPLOAD

同样的方法，我们可以使用空格转换为用空格分隔的字符串

let stringwithspace=array.map(element=>element).join(" ")
console.log(stringwithspace)//READ WRITE DELETE UPLOAD

这种方法适用于任何类型的数组和任何类型的分隔符。

使用toString方法

javascript中的每个对象都有toString()方法。

数组也有这个方法，它可以打印出用逗号分隔的数组的字符串。

这个方法只适用于原始类型，不适用于对象数组。

console.log(array.toString())
//READ,WRITE,DELETE,UPLOAD

在angular中将对象数组转换为字符串

数据来自REST API并希望显示在字符串中，这些数据需要在客户端使用angular代码库显示

这篇文章没有谈到从API检索数据的问题。

假设下面的数据在typecript组件中可用。

这将是一个例子，我们需要在数据表中显示用户的信息，每一行都可以有用户信息，其中一列需要显示用逗号分隔的角色名称。

使用map迭代器转换为字符串，最后用单独的连字符加入字符串。

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  roles = [
    { id: "1", name: "superadmin" },
    { id: "2", name: "admin" },
    { id: "3", name: "user" }
  ];
  roleString: String = null;
  constructor() {
    this.roleString = this.roles.map(element => element.name).join("-");
  }
}

在组件html模板中，使用模板表达式显示字符串。

<p>
  {{roleString}}
</p>
avatar
文章
阅读
粉丝