JavaScript 中取得文件扩展名

Posted by cl9000 on May 28, 2020

人只有献身于社会,才能找出那短暂而有风险的生命的意义。 ——<阿尔伯特·爱因斯坦>

获取文件扩展名

问题 1: 怎样取得文件扩展名?

1
2
3
4
5
6
7
8
var file1 = "50.xsl";
var file2 = "30.doc";
getFileExtension(file1); //returs xsl
getFileExtension(file2); //returs doc

function getFileExtension(filename) {
/*TODO*/
}

解决方法 1: 正则表达式

1
2
3
function getFileExtension1(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

解决方法 2: String 的 split 方法

1
2
3
function getFileExtension2(filename) {
return filename.split('.').pop();
}

这两种解决方法不能解决一些边缘情况,这有另一个更加强大的解决方法。

解决方法 3: String 的 slice、lastIndexOf 方法

1
2
3
4
5
6
7
8
9
function getFileExtension3(filename) {
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

console.log(getFileExtension3('')); // ''
console.log(getFileExtension3('filename')); // ''
console.log(getFileExtension3('filename.txt')); // 'txt'
console.log(getFileExtension3('.hiddenfile')); // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'

这是如何实现的呢?

  • String.lastIndexOf() 方法返回指定值(本例中的’.’)在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。
  • 对于 'filename''.hiddenfile'lastIndexOf 的返回值分别为 0-1 无符号右移操作符(»>) 将 -1 转换为 4294967295,将 -2 转换为4294967294,这个方法可以保证边缘情况时文件名不变。
  • String.prototype.slice() 从上面计算的索引处提取文件的扩展名。如果索引比文件名的长度大,结果为""。

对比

解决方法 参数 结果
解决方法 1: Regular Expression ‘’
‘filename’
‘filename.txt’
‘.hiddenfile’
‘filename.with.many.dots.ext’
undefined
undefined
‘txt’
‘hiddenfile’
‘ext’
解决方法 2: String split ‘’
‘filename’
‘filename.txt’
‘.hiddenfile’
‘filename.with.many.dots.ext’
‘’
‘filename’
‘txt’
‘hiddenfile’
‘ext’
解决方法 3: String slice, lastIndexOf ‘’
‘filename’
‘filename.txt’
‘.hiddenfile’
‘filename.with.many.dots.ext’
‘’
‘’
‘txt’
‘’
‘ext’

实例与性能

来源

[How can I get file extensions with JavaScript] https://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript

参考

关注【公众号】,了解更多。



支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享,您的支持将鼓励我继续创作!