console.log(text)打印不出来的值,用console.log(text.length)却打印出来长度为1?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LJFPHP/article/details/88538889

一、背景

      好久没写博客了,最近时间实在是紧的不行,忙中偷闲记录一个小问题先。大概描述就是像题目中说的那样,用console.log打印结果和实际的length不同,以为是遇到鬼了,实际呢,我还是太年轻。
如图:
在这里插入图片描述

二、找问题过程

1、 使用typeof看看 发现类型都是string的

2、console.log(JSON.stringify(text)); 发现加了个\t制表符,我们知道,console.log(JSON.stringify(text))有个参数space ,指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(字符串的前十个字母),该字符串将被作为空格;如果该参数没有提供(或者为null)将没有空格。 (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
在这里插入图片描述

3、 打印 console.log(text === "" ); 发现都是false,也就是说并不是空字符串

4、 打印 console.log(text === "\t" ); 发现打印的结果是true,也就是说此时的text是一个空格

5、 发现空格之后,打印console.log(trim(sourceText).length); 去掉空格,打印出的结果正常了,长度为0的空字符串

问题所在:
代码中有一句, var text = b.innerText; (b是td元素节点,这部分是获取td里面的内容)

      由于其中一个td里面是一个img标签,所以用innertext()获取到的是不含html的内容。用<span></span>测试一下,
发现获取到的还是一个空格,那么可以大致总结下,用innertext()获取td标签的值的话,无论是否获取到结果,后面
都会自动加个空格(\t),就是不清楚这个空格到底是innertext()获取不到值自己解析的,还是td自带的有一个空格?

6、 如果要对innertext()赋值之后的变量进行测试的话,那尽量去掉它的空格,或者把(\t)考虑进去。
JS去除空格参考: https://www.cnblogs.com/bafeiyu/archive/2012/12/13/2816546.html

总结:
      这次问题的出现,整体来说还是对于使用变量不够严谨引起的。在使用变量的时候,如果是int类型,建议类似于php的intval()一样,格式化一下。如果是string类型的话,最起码也要去除下空格。把这些当做习惯,那在开发中肯定会省下很多不必要的小bug。

end

猜你喜欢

转载自blog.csdn.net/LJFPHP/article/details/88538889