JavaScript console.log() 跨浏览器兼容性与格式化输出详解

作者:清欢

时间:2026-10-27

浏览:367

本文详解JavaScript中console.log()函数的使用方法,涵盖字符串格式化占位符(%s, %d, %o等)及变量、数组、对象的输出示例。重点解决Firefox、IE8及Opera Dragonfly下的兼容性问题,提供window.console兼容代码,确保多浏览器环境下调试功能正常。

文章目录

console.log() 基础与跨浏览器兼容方案

console.log();



使用console.log()函数时,必须确保Firebug插件已开启,否则在Firefox中该函数将失效并可能干扰正常程序运行;若在IE浏览器中执行,则会直接报错。




该函数的第一个参数可以是包含格式化占位符的字符串,例如:



console.log("The %s jumped over %d tall buildings", animal, count);



支持的格式化字符串类型如下:


%s 对应字符串


%d 对应整型


%i(目前暂不支持数字型)


%f 对应浮点型(目前暂不支持数字型)


%o 对应链接对象



console.log()用法

格式化输出与数据类型示例

具体代码示例如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript的console.log()用法</title>
<script type="text/javascript">
/* 
console.log 最初是 Firefox 的“专利”,严格来说,它是安装了 Firebugs 插件后的 Firefox 浏览器独有的调试功能。
IE8 后来也实现了这一功能,但使用体验不如 Firebugs 便捷,只有在手动开启调试窗口(按F12)时,console.log 才能输出结果,否则会导致报错。
近期发现 Opera 浏览器也提供了名为 Dragonfly 的调试工具,其 DOM 查看功能已能与 Firebug 媲美,但仍不支持 console.log。为此,有人提供了以下两行兼容代码:
window.console = window.console || {};
console.log || (console.log = opera.postError);
经实际测试,上述代码有效。
至此,Firefox、IE 和 Opera 浏览器均能使用 console.log 进行调试。
需要注意的是,IE 和 Opera 下的 console.log 功能相比 Firebug 原版仍较为简陋,例如当参数为 Object 或数组时,无法显示更详细的内部结构。
*/ 
//变量
var i = 'I am a string';
console.log('变量:',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组:',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
}; 
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
}; 
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
}; 
console.log('对象:',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1:',objArr1);
console.log('对象数组1:',objArr2);
/* 
输出结果如下:
变量:I am a string
数组:[1, 2, 3, 4, 5]
对象:Object { key1="value1", key2="value2", key3="value3"}
对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]
对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]
*/ 
</script>
</head>
<body>
</body>
</html>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章