举例讲解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写的操作系统
Apr 23 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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代码DOS造成用光网络带宽
2011/03/01 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
Bootstrap输入框组件使用详解
2017/06/09 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python实现一个论文下载器的过程
2021/01/18 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
RealTek面试题
2016/06/28 面试题
2014年文明创建工作总结
2014/11/25 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android