如何获取无扩展名文件的NULL/空字符串/UNDEFINED扩展名值

Hey there! I totally get the frustration here—using .split('.').pop() works great for URLs with clear extensions, but it falls flat when there's no dot in the filename segment. Let's walk through a couple of solid solutions to get you the result you want (null, empty string, or undefined) when there's no extension present.

Why Your Original Approach Fails #

Quick breakdown: When you run split('.') on a URL like http://www.example.com/uploads/abc, it splits the string at every dot, resulting in an array like ['http://www', 'example', 'com/uploads/abc']. Popping the last element gives you com/uploads/abc instead of nothing—definitely not what you need.

Solution 1: Extract Filename First, Then Check for Extension #

This method first isolates the filename from the rest of the URL, then checks if that filename has a valid extension:

function getFileExtension(url) {
  // Grab the filename part after the last slash
  const fileName = url.slice(url.lastIndexOf('/') + 1);
  // Find the last occurrence of a dot in the filename
  const dotPosition = fileName.lastIndexOf('.');
  
  // Only return the extension if the dot isn't at the start (e.g., .gitignore) and exists
  if (dotPosition > 0) {
    return fileName.slice(dotPosition + 1);
  }
  
  // Return null (or '', undefined) when there's no valid extension
  return null;
}

// Test cases
console.log(getFileExtension('http://www.example.com/uploads/def.png')); // 'png'
console.log(getFileExtension('http://www.example.com/uploads/xyz.pdf')); // 'pdf'
console.log(getFileExtension('http://www.example.com/uploads/abc')); // null

Solution 2: Use a Regular Expression (Concise Option) #

A regex can directly target the extension at the end of the filename segment, avoiding the pitfalls of splitting the entire URL:

function getFileExtension(url) {
  // Regex matches a dot followed by non-slash/non-dot characters at the end of the URL
  const extensionMatch = url.match(/\.([^./]+)$/);
  
  // Return the captured extension if matched, else null
  return extensionMatch ? extensionMatch[1] : null;
}

// Test cases
console.log(getFileExtension('http://www.example.com/uploads/def.png')); // 'png'
console.log(getFileExtension('http://www.example.com/uploads/xyz.pdf')); // 'pdf'
console.log(getFileExtension('http://www.example.com/uploads/abc')); // null

The regex \.([^./]+)$ works by:

• \.: Matching a literal dot
• ([^./]+): Capturing one or more characters that are not dots or slashes (so it won't pick up dots in the domain path)
• $: Ensuring the match is at the very end of the URL

Customize the Return Value #

If you prefer an empty string or undefined instead of null, just swap out the return value in either function. For example:

// Return empty string
return dotPosition > 0 ? fileName.slice(dotPosition + 1) : '';

// Or return undefined
return dotPosition > 0 ? fileName.slice(dotPosition + 1) : undefined;

内容的提问来源于stack exchange，提问作者Owais