举例讲解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实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 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去除字符串换行符示例分享
2014/02/13 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Openlayers实现测量功能
2020/09/25 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
专科应届生求职信
2013/11/24 职场文书
在校学生职业规划范文
2014/01/08 职场文书
留学自荐信写作方法
2014/01/27 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
学校募捐倡议书
2014/05/14 职场文书
土建施工员岗位职责
2014/07/16 职场文书
护士工作失误检讨书
2014/09/14 职场文书