举例讲解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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
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连接mssql数据库的几种方法
2013/02/21 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python装饰器与递归算法详解
2016/02/18 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
HEMA法国:荷兰原创设计
2019/02/21 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
绩效管理实施方案
2014/03/19 职场文书
幼师求职自荐信
2014/05/31 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
学习保证书怎么写
2015/02/26 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技