举例讲解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 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
微信小程序实现animation动画
Jan 26 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
原生JS实现拖拽效果
Dec 04 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
小区消防演习方案
2014/02/21 职场文书
银行求职信
2014/05/31 职场文书
团日活动总结格式
2015/05/11 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
MySQL添加索引特点及优化问题
2022/07/23 MySQL