举例讲解JavaScript中将数组元素转换为字符串的方法


Posted in Javascript onOctober 25, 2015

首先来看一下从一个数组中选择元素的方法slice():
源代码:

<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to extract the second and the third elements from the array.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
var x=document.getElementById("demo");
x.innerHTML=citrus;
}
</script>
​
</body>
</html>

测试结果:

Orange,Lemon

我们可以用数组的元素组成字符串,相关的join()方法使用例子:

源代码:

<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to join the array elements into a string.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();
}
</script>
​
</body>
</html>

测试结果:

Banana,Orange,Apple,Mango

直接转换数组到字符串则可以用toString()方法:
源代码:

<!DOCTYPE html>
<html>
<body>
​
<p id="demo">点击按钮将数组转为字符串并返回。</p>
​
<button onclick="myFunction()">点我</button>
​
<script>
function myFunction()
{
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 var str = fruits.toString();
 var x=document.getElementById("demo");
 x.innerHTML= str;
}
</script>
​
</body>
</html>

测试结果:

Banana,Orange,Apple,Mango
Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
js只执行1次的函数示例
Jul 20 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 #Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 #Javascript
详解JavaScript编程中的数组结构
Oct 24 #Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 #Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 #Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 #Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 #Javascript
You might like
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python中input和raw_input的一点区别
2014/10/21 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python实现元素等待代码实例
2019/11/11 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
在python3中实现更新界面
2020/02/21 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
保密工作目标责任书
2014/07/28 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python