举例讲解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 相关文章推荐
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
封装属于自己的JS组件
Jan 27 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
js实现录音上传功能
Nov 22 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
原生JavaScript实现换肤
Feb 19 Javascript
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
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
浅谈PHP的反射机制
2016/12/15 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python3 Random模块代码详解
2017/12/04 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
企业总经理岗位职责
2014/02/13 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
个人授权委托书范本
2014/09/14 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
JavaScript文档对象模型DOM
2021/11/20 Javascript
Golang入门之计时器
2022/05/04 Golang
Echarts如何重新渲染实例详解
2022/05/30 Javascript
sql注入报错之注入原理实例解析
2022/06/10 MySQL