一、背景
做文件预览功能时，想在 JSP 中判断文件后缀名，如 “ 嚣张.jsp ”。
二、解决方法
方法一：substr（）/ substring（）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>
<body>
<h1>小白学习</h1>
<input type="text" id="context" />
<button οnclick="test()">测试</button>
<script>
//substr() 方法用于返回一个从指定位置开始的指定长度的子字符串；
//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
function test() {
var context = $('#context').val();
var suffix = context.substr(context.lastIndexOf("."));
console.log('suffix==' + suffix);
}
function test1() {
var context = $('#context').val();
var suffix = context.substring(context.lastIndexOf("."));
console.log('suffix==' + suffix);
}
</script>
</body>
</html>结果如下：
这两种方法都可直接截取后缀，看起来用法类似，但还是有区别的，文末再做解释。
方法二：split（）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>
<body>
<h1>小白学习</h1>
<input type="text" id="context" />
<button οnclick="test()">测试</button>
<script>
function test() {
var context = $('#context').val();
var strArray = context.split(".");
var length = strArray.length;
for (var i in strArray){
console.log('strArray['+ i +']=='+ strArray[i])
}
console.log('后缀==' + strArray[length-1]);
}
</script>
</body>
</html>结果如下：
split() 中如果用空字符去截取的话会把每一个字符截断开来。 如：context.split(""); 结果为{嚣,张,.,j,p,g}
三、知识积累
（1）substr（）/ substring（）的区别
<body>
<h1>小白学习</h1>
<button οnclick="test()">测试</button>
<script>
function test() {
var str = "Hello world!";
// ——————————substr(指定开始下标, 指定截取长度)————————
console.log('str.substr(0)==' + str.substr(0));// = Hello world!
//---只定义了开始下标，则截取长度默认为字符串长度
console.log('str.substr(0,5)==' + str.substr(0,5));// = Hello
//---开始下标为0，截取长度为5
console.log('str.substr(2,11)==' + str.substr(2,10));// = llo world!
//---开始下标为2，截取长度为10
// ——————————substring(指定开始下标，指定结束下标)————————
console.log('str.substring(0)==' + str.substring(0));// = Hello world!
//---定义了开始下标，则默认结束下标为字符串最后一个字符的下标
console.log('str.substring(0,5)==' + str.substring(0,5));// = Hello
//---开始下标为0，结束下标为5
console.log('str.substring(2,11)==' + str.substring(2,10));// = llo worl
//---开始下标为2，结束下标为10（此处与substr区别明显！）
}
</script>
</body>substr() 方法用于返回一个从指定位置开始的指定长度的子字符串；substring() 方法用于提取字符串中介于两个指定下标之间的字符。
（2）join() ：将数组合并成字符串
<body>
<h2>小白学习</h2>
<button οnclick="test()">测试</button>
<script>
function test() {
var myArray=new Array("h","a","n","p","i");
var str=myArray.join("");
console.log('str==' + str);
}
</script>
</body>该方法是使用自定义的分隔符将一个数组合并为一个字符串。
（3）indexOf（）/ lastIndexOf（）
<body>
<h1>小白学习</h1>
<button οnclick="test()">测试</button>
<script>
function test() {
var str = "Hello world!";
console.log('str.indexOf("o")==' + str.indexOf('o'));// 4
console.log('str.lastIndexOf("o")==' + str.lastIndexOf('o'));// 7
}
</script>
</body>这两个方法可以返回字符串中匹配子串的第一个字符、最后一个字符的下标，合理的使用可以是上面的截取方法更为灵活。
