根据后端返回的路径后缀名不同渲染对应图标、图片、require、exec、split、toLowerCase、toString、lastIndexOf、substring

版本一（只能处理正确的路径）

function file(data) { // 需要渲染的图片 let imgPath = { txt: require('@/image/txt.jpg'), mp4: 'image/MP4.png', gif: require('@/image/GIF.png'), jpg: 'image/jpg.png', png: require('@/image/png.jpg'), docx: 'image/docx.png', // 默认图标 defaultImg: require('@/image/defaultImg.jpg'), }; // /\.[a-zA-Z]+/.exec(data)[0] 获取后缀名，包括 . // split('.')[1] 去除后缀名的 . // toLowerCase() 转小写 let path = imgPath[/\.[a-zA-Z]+/.exec(data)[0].split('.')[1].toLowerCase()]; // 当对象中找不到和传入的后缀名匹配时， // 使用默认图片 data = path == undefined ? imgPath.defaultImg : path; // 返回对应的图片路径 return data; }; console.log(file('http://youdao.GIF')); // image/GIF.png console.log(file('http://Word.docx')); // image/docx.png console.log(file('http://baidu.png')); // image/png.jpg console.log(file('http://viod.mp3')); // image/defaultImg.jpg 

版本二（可以处理单独对应的路径，只传后缀名）

/*
 * 根据文件后缀名渲染对应图标
 * @param {object} fileName 路径/地址
 * @return {object} 该函数会返回一个图片字符串
 */ function fileSuffixName(fileName = "") { // 需要渲染的图片 let imgPath = { // 图片的引入方式为require('@/image/txt.jpg')最佳 txt: "../image/text.png", mp3: "../image/mp3.png", mp4: "../image/mp4.png", gif: "../image/gif.png", jpg: "../image/jpg.png", png: "../image/png.png", docx: "../image/docx.png", // 默认图标 defaultImg: "../image/defaultImg.png", }, path = null, // 判断是否有点 reg = /\.[a-zA-Z]+/.exec(fileName); if (reg) { // /\.[a-zA-Z]+/.exec(fileName)[0] 获取后缀名，包括点（.） // split('.')[1] 去除后缀名的点（.） // toLowerCase() 转小写 path = imgPath[reg[0].split(".")[1].toLowerCase()]; } else { path = imgPath[fileName.toLowerCase()]; } // 当对象中找不到和传入的后缀名匹配时， // 使用默认图片 fileName = !path ? imgPath.defaultImg : path; // 返回对应的图片路径 return fileName; } console.log(fileSuffixName("http://youdao.GIF")); // ../image/gif.png console.log(fileSuffixName("http://Word.docx")); // ../image/docx.png console.log(fileSuffixName("mp3")); // ../image/mp3.png console.log(fileSuffixName("DOCX")); // ../image/docx.png console.log(fileSuffixName("-")); // ../image/defaultImg.png console.log(fileSuffixName("")); // ../image/defaultImg.png console.log(fileSuffixName()); // ../image/defaultImg.png 

版本三（可以传任何值）

/*
 * 根据文件后缀名渲染对应图标
 * @param {object} fileName 路径/地址
 * @return {object} 该函数会返回一个图片字符串
 */ function fileSuffixName(fileName = "") { fileName = fileName.toString(); // 需要渲染的图片 let imgPath = { // 图片的引入方式为require('@/image/txt.jpg')最佳 txt: "../image/text.png", mp3: "../image/mp3.png", mp4: "../image/mp4.png", gif: "../image/gif.png", jpg: "../image/jpg.png", png: "../image/png.png", docx: "../image/docx.png", defaultIcon: "../image/defaultIcon.png", }, i = fileName.lastIndexOf("."), key = fileName.substring(i + 1).toLowerCase(); key = imgPath[key] ? imgPath[key] : imgPath.defaultIcon; return key; } console.log(fileSuffixName()); // ../image/defaultIcon.png console.log(fileSuffixName(1)); // ../image/defaultIcon.png console.log(fileSuffixName("3")); // ../image/defaultIcon.png console.log(fileSuffixName("-")); // ../image/defaultIcon.png console.log(fileSuffixName("")); // ../image/defaultIcon.png console.log(fileSuffixName("http://youdao.GIF.")); // ../image/defaultIcon.png console.log(fileSuffixName("http://youdao.GIF.k")); // ../image/defaultIcon.png console.log(fileSuffixName("mp3")); // ../image/mp3.png console.log(fileSuffixName("MP4")); // ../image/mp4.png console.log(fileSuffixName("http://youdao.GIF.png")); // ../image/png.png console.log(fileSuffixName("http://youdao.GIF")); // ../image/gif.png console.log(fileSuffixName("http://Word.docx")); // ../image/docx.png console.log(fileSuffixName("DOCX")); // ../image/docx.png 

版本四-class

class MatchingIcon { constructor(icon) { this.originIcon = icon; } /*
	 * 根据文件后缀名渲染对应图标
	 * @param {object} str 路径/地址
	 * @return {object} 该函数会返回一个图片字符串
	 */ fileSuffixName(str = "") { str = str.toString(); // 需要渲染的图片 let imgPath = this.originIcon, i = str.lastIndexOf("."), key = str.substring(i + 1).toLowerCase(); key = imgPath[key] ? imgPath[key] : imgPath.defaultIcon; return key; } } let originData = { // 图片的引入方式为require('@/image/txt.jpg')最佳 txt: "../image/text.png", mp3: "../image/mp3.png", mp4: "../image/mp4.png", gif: "../image/gif.png", jpg: "../image/jpg.png", png: "../image/png.png", docx: "../image/docx.png", defaultIcon: "../image/defaultIcon.png", }, a = new MatchingIcon(originData); console.log(a.fileSuffixName()); // ../image/defaultIcon.png console.log(a.fileSuffixName(1)); // ../image/defaultIcon.png console.log(a.fileSuffixName("3")); // ../image/defaultIcon.png console.log(a.fileSuffixName("-")); // ../image/defaultIcon.png console.log(a.fileSuffixName("")); // ../image/defaultIcon.png console.log(a.fileSuffixName("http://youdao.GIF.")); // ../image/defaultIcon.png console.log(a.fileSuffixName("http://youdao.GIF.k")); // ../image/defaultIcon.png console.log(a.fileSuffixName("mp3")); // ../image/mp3.png console.log(a.fileSuffixName("MP4")); // ../image/mp4.png console.log(a.fileSuffixName("http://youdao.GIF.png")); // ../image/png.png console.log(a.fileSuffixName("http://youdao.GIF")); // ../image/gif.png console.log(a.fileSuffixName("http://Word.docx")); // ../image/docx.png console.log(a.fileSuffixName("DOCX")); // ../image/docx.png 

版本五-闭包

/*
 * 根据文件后缀名渲染对应图标
 * @param {object} str 路径/地址
 * @return {object} 该函数会返回一个图片字符串
 */ function matchingIcon(icon) { return function fileSuffixName(str = "") { str = str.toString(); let i = str.lastIndexOf("."), key = str.substring(i + 1).toLowerCase(); key = icon[key] ? icon[key] : icon.defaultIcon; return key; }; } let originData = { // 图片的引入方式为require('@/image/txt.jpg')最佳 txt: "../image/text.png", mp3: "../image/mp3.png", mp4: "../image/mp4.png", gif: "../image/gif.png", jpg: "../image/jpg.png", png: "../image/png.png", docx: "../image/docx.png", defaultIcon: "../image/defaultIcon.png", }, fileSuffixName = matchingIcon(originData); console.log(fileSuffixName()); // ../image/defaultIcon.png console.log(fileSuffixName(1)); // ../image/defaultIcon.png console.log(fileSuffixName("3")); // ../image/defaultIcon.png console.log(fileSuffixName("-")); // ../image/defaultIcon.png console.log(fileSuffixName("")); // ../image/defaultIcon.png console.log(fileSuffixName("http://youdao.GIF.")); // ../image/defaultIcon.png console.log(fileSuffixName("http://youdao.GIF.k")); // ../image/defaultIcon.png console.log(fileSuffixName("mp3")); // ../image/mp3.png console.log(fileSuffixName("MP4")); // ../image/mp4.png console.log(fileSuffixName("http://youdao.GIF.png")); // ../image/png.png console.log(fileSuffixName("http://youdao.GIF")); // ../image/gif.png console.log(fileSuffixName("http://Word.docx")); // ../image/docx.png console.log(fileSuffixName("DOCX")); // ../image/docx.png 

版本六（处理了匹配的对象数据并且封装成npm包）

npm install mj-matching-icon --save

cnpm install mj-matching-icon -S 

默认图标字段必须放在匹配对象的第一位

exec

exec方法测试字符串中的匹配项。 该方法是通用的匹配模式。 如果找到匹配项，则返回结果数组，否则返回null。

split

split方法将字符串拆分为子字符串数组。 split方法返回新数组，不会更改原始字符串。 如果(" ")用作分隔符，则字符串在单词之间进行拆分。

toLowerCase

方法将字符串转换为小写字母。 方法不会更改原始字符串。

toString

方法将对象作为字符串返回。 如果toString方法不能返回字符串，则返回"[object Object]"。 Object.toString()总是返回对象构造函数。 方法不会更改原始对象。