- 问题描述:
在页面上使用了ant design的分页组件,展示总条数为共多少条,在这里展示时使用了模板字符串(``),即部分代码如下:
<a-pagination
class="myPagination"
:total="total"
:show-total="total => `共 ${total} 条`"
/>
但是在接口返回数据时,如果未返回任何有效数据,接口返回了空对象,这时页面展示为共[object Object]条
-
问题分析
如果模板字符串中${}大括号中的值不是字符串,则将按照一般的规则转换为字符串。如,若大括号中是一个对象,则将默认调用对象的toString方法,把对象转换为字符串。但是空对象调用toString方法就会显示[object Object],因此问题出现。 -
知识拓展:
(1).toString() // "1"
[1,2].toString() // "1, 2"
({}).toString() // [object Object]
true.toString() // "true"
null.toString() // Uncaught TypeError: Cannot read property 'toString' of null
undefined.toString() // Uncaught TypeError: Cannot read property 'toString' of null