举例讲解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 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
javascript date格式化示例
Sep 25 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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
递归列出所有文件和目录
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python实现归并排序算法
2018/11/22 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
大四自我鉴定范文
2013/10/06 职场文书
活动志愿者自荐信
2014/01/27 职场文书
消防安全汇报材料
2014/02/08 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
创优争先心得体会
2014/09/11 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
会计工作能力自我评价
2015/03/05 职场文书
第一军规观后感
2015/06/12 职场文书