在线工具
  1. 首页
  2. 开发工具
  3. JS 在线运行工具

JS 在线运行工具

分类：开发工具
本工具可以在线执行 Javascript 代码，提供在线运行、测试、调试 JS 代码的功能。本工具可作为 Chrome 浏览器控制台调试工具的补充，是一款高效、便捷的程序员工具。
相关工具：SQL 代码格式化XML 代码压缩工具设备特征检测工具SASS 转 CSSSQL 代码压缩工具PHP 反序列化工具HTML 代码格式化XML 代码格式化
请输入 JS 代码
运行结果
 工具介绍
工具简介
JS 在线运行工具，提供了在线运行、测试、调试 JS 代码的功能。本工具所要运行的 JavaScript 代码，均在客户端浏览器执行，不会发送到服务器解释执行。因此，执行速度相当快。
本工具特别适合对小段 JS 代码进行测试（调试）的场景。比如，可以通过本工具对某个方法进行测试（也称为单元测试），以判断方法执行结果是否符合预期。
示例代码
本工具给出了一段示例代码，用于判断指定字符串是否是一个 URL。这段代码定义了一个 isUrl() 方法，方法内部使用正则表达式来验证参数字符串是否是符合 URL 规则；同时，还演示了如何测试我们定义的 isUrl() 方法。
代码如下：
// 检测是否是合法的 URL
function isUrl(url) {
    const regex = /\b(https?):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/i;
    return regex.test(url);
}
// 测试代码
let url = "https://www.52cha.cc";
let r = isUrl(url);

// 输出结果
console.log(url);
console.log(r);
测试结果如下：
JavaScript 测试结果
JavaScript 测试结果
测试用例展示
1、测试 ES5 Array.map 方法
我们将使用 ES5 标准中数组的 map() 方法，对数组中的数字乘以 2，通过运行结果来验证方法是否符合预期。
测试代码如下：
/**
 * 对数据中的每一项乘以2
 */
let numbers = [1, 2, 3, 4, 5];
numbers = numbers.map(function(num) {
    return num * 2;
});
console.log(numbers);
测试结果：
调用 Array.map 后，运行结果符合预期
调用 Array.map 后，运行结果符合预期
2、打印对象信息
由于 JavaScript 对象默认的 toString() 方法只会输出 [object Object]，若想要以人类可读的方式打印一个对象信息，需要用 JSON.stringify() 把对象以字符串的形式展示出来。
代码如下：
// 定义一个对象
let person = {
    name: "Jerry Fang",
    age: 29,
    sex: "male"
}

// 直接打印对象
console.log(person)

// 使用 JSON.stringify() 之后再打印对象信息
console.log(JSON.stringify(person))
运行结果：
打印 JavaScript 对象信息
打印 JavaScript 对象信息
3、显示错误信息
当要运行或测试的代码有错误时，本工具将以红色文字把错误信息展示在运行结果区。比如，当调用对象不存在的方法时，会提示：xxx is not a function.
测试代码如下：
// 定义一个对象
let person = {
    name: "Jerry Fang",
    age: 29,
    sex: "male"
}

// 直接打印对象
console.log(person)

// 调用对象不存在的方法 <--- 此处将报错
console.log(person.sayHello())

// 使用 JSON.stringify() 之后再打印对象信息
console.log(JSON.stringify(person))
运行结果：
执行含有错误的 JS 代码时，运行结果将显示错误信息
执行含有错误的 JS 代码时，运行结果将显示错误信息
从上面的运行结果可以得知，在 JS 错误代码之前的代码可以正常运行；JS 代码之后的那些代码将不会被执行，这也符合我们对程序执行顺序的基本认知。
补充说明
1、如何输出测试结果
由于是在网页中显示 JS 运行结果，所有结果本质上都是一个字符串（包括 JS 对象）。因此，本工具只支持使用 console.log() 输出执行结果，console 对象的其它方法，如：console.info()、console.error()、console.table() 等均不支持。
2、关于对 ES 标准的支持程度
由于本工具是基于客户端浏览器来完成 JS 代码的运行，因此，是否支持最新的 ES 特性以及对 ES 标准支持的程度，完全取决于你当前使用的浏览器。通常，我们建议使用主流浏览器（如：Chrome、Firefox、Safari）的最新版本来测试 JavaScript 代码。当然，由于各浏览器之间的差异，同一段代码，在不同的浏览器执行，可能会得到不一致的结果（甚至报错），需要各位了解并知悉原因。
最后更新：