举例讲解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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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之COOKIE支持详解
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
解析isset与is_null的区别
2013/08/09 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
javascript动态加载二
2012/08/22 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
用python制作游戏外挂
2018/01/04 Python
Python异常的检测和处理方法
2018/10/26 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Django设置Postgresql的操作
2020/05/14 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
检讨书范文1000字
2015/01/28 职场文书
师德承诺书2015
2015/04/28 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript