举例讲解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 TextArea字符串长度限制代码集合
Oct 31 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
JS常见内存泄漏及解决方案解析
May 30 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面向对象全攻略 (五) 封装性
2009/09/30 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Django实战之用户认证(初始配置)
2018/07/16 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
盛大二次面试题
2016/11/18 面试题
伏羲庙导游词
2015/02/09 职场文书
结婚老公保证书
2015/02/26 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
电力工程合作意向书
2015/05/11 职场文书