js path路径详解|极客笔记

js path路径详解

在网页开发中，我们经常会涉及到处理文件路径的操作。在JavaScript中，路径的处理涉及到不同的情况和方法。本文将详细介绍JS中路径的相关知识，包括相对路径和绝对路径的概念，以及如何使用路径来引入外部资源和执行文件操作等。

1. 相对路径和绝对路径

1.1 相对路径

相对路径是相对于当前文件的路径来确定文件的位置。在HTML中，相对路径可以从当前文件所在的文件夹开始，通过一些简单的符号表示路径的方向。常见的相对路径符号包括：

例如，假设有如下文件目录结构：

- index.html
- css
  - style.css
- js
  - script.js

如果我们在index.html中引入style.css，可以使用相对路径./css/style.css。

1.2 绝对路径

绝对路径是从根目录开始的完整路径。在网页开发中，绝对路径通常以http://或https://开头，可以直接定位到网络上的资源。例如：

https://www.example.com/js/script.js

绝对路径可以直接用于引入网络上的资源，不需要考虑当前文件的位置。

2. 使用路径引入资源文件

在网页开发中，我们经常需要引入外部的CSS文件、JavaScript文件或者图片等资源。这时候就需要使用路径来定位这些资源。

2.1 引入CSS文件

在HTML中，我们可以使用<link>标签来引入外部的CSS文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- content goes here -->
</body>
</html>

在上面的示例中，我们使用href="css/style.css"来引入style.css文件。如果style.css与index.html位于同一目录下，则可以使用相对路径。

2.2 引入JavaScript文件

类似地，我们可以使用<script>标签来引入外部的JavaScript文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/script.js"></script>
</head>
<body>
    <!-- content goes here -->
</body>
</html>

在上面的示例中，我们使用src="js/script.js"来引入script.js文件。同样地，可以使用相对路径来定位文件。

2.3 引入图片

在HTML中，我们可以使用<img>标签来引入图片。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="images/logo.png" alt="Logo">
</body>
</html>

在上面的示例中，我们使用src="images/logo.png"来引入logo.png图片。同样地，可以使用相对路径来定位图片文件。

3. 文件操作路径

在JavaScript中，我们经常需要进行一些文件操作，例如读取文件、写入文件等。这时候需要使用路径来确定文件的位置。

3.1 读取文件

在Node.js环境中，可以使用fs模块来进行文件操作。例如，读取文件内容：

const fs = require('fs');
const path = require('path');

const filePath = path.join(__dirname, 'data.txt');

fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data);
});

在上面的示例中，我们使用path.join(__dirname, 'data.txt')来获取data.txt文件的绝对路径，然后使用fs.readFile()来读取文件内容。

3.2 写入文件

类似地，可以使用fs.writeFile()来写入文件内容。例如：

const fs = require('fs');
const path = require('path');

const filePath = path.join(__dirname, 'output.txt');
const content = 'Hello, World!';

fs.writeFile(filePath, content, 'utf-8', (err) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log('File has been written');
});

在上面的示例中，我们使用path.join(__dirname, 'output.txt')来获取output.txt文件的绝对路径，然后使用fs.writeFile()来写入文件内容。