举例讲解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表单域属性过滤器用法分析
Feb 10 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
js倒计时简单实现代码
Aug 11 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
js实现弹窗效果
Aug 09 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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输出XML到页面的3种方法详解
2013/06/06 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
Dojo 学习要点
2010/09/03 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python检测网络延迟的代码
2018/05/15 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python内打印变量之%和f的实例
2020/02/19 Python
学习Python爬虫的几点建议
2020/08/05 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
事业单位接收函
2014/01/10 职场文书
副处级干部考察材料
2014/05/17 职场文书
音乐学专业求职信
2014/07/22 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript