举例讲解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 getElementsByTagName的简写方式
Jun 27 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
vue如何从接口请求数据
Jun 22 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
chrome原生方法之数组
2011/11/30 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
vue指令做滚动加载和监听等
2019/05/26 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
工程部主管岗位职责
2013/11/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
五年级数学教学反思
2014/02/11 职场文书
文明班集体申报材料
2014/05/23 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
个人工作表现自我评价
2015/03/06 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android