举例讲解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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
实用函数10
2007/11/08 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
深入理解python函数递归和生成器
2016/06/06 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python创建字典的八种方式
2019/02/27 Python
python set内置函数的具体使用
2019/07/02 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python实现图片转字符画的完整代码
2021/02/21 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
软件测试企业面试试卷
2016/07/13 面试题
企业管理毕业生求职信范文
2014/03/07 职场文书
带病坚持工作事迹
2014/05/03 职场文书
室内设计专业自荐信
2014/05/31 职场文书
高中学校对照检查材料
2014/08/31 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
sql注入教程之类型以及提交注入
2021/08/02 MySQL