举例讲解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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
简单的js表格操作
Sep 24 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
使用php4加速网络传输
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python爬豆瓣电影实例
2018/02/23 Python
python逆序打印各位数字的方法
2018/06/25 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python实现飞船大战
2020/04/24 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
户籍证明的格式
2014/01/13 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
学历证明样本
2015/06/16 职场文书
疾病证明书
2015/06/19 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python