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

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 对应链接对象

 
<!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>