如何动态修改`<title>`的标题名称？

动态修改 title 标题名称在前端开发中很常见，例如根据页面内容、用户操作或实时数据更新标题。以下是几种方法：

1. 使用 document.title 属性：

这是最直接和常用的方法。 document.title 属性可以直接设置或获取当前页面的标题。

document.title = '新的标题';

示例：根据用户输入修改标题:

const inputField = document.getElementById('titleInput');

inputField.addEventListener('input', () => {
  document.title = inputField.value;
});

2. 使用模板字面量动态生成标题:

如果标题需要包含变量或表达式，可以使用模板字面量。

const productName = 'Awesome Product';
const productPrice = '$99';
document.title = `${productName} - ${productPrice}`;

示例：根据页面内容修改标题:

const pageHeading = document.querySelector('h1').textContent;
document.title = `${pageHeading} - My Website`;

3. 结合函数更新标题:

为了更好地组织代码，可以将更新标题的逻辑封装到一个函数中。

function updateTitle(newTitle) {
  document.title = newTitle;
}

// ... 在其他地方调用函数
updateTitle('更新后的标题');

示例：根据实时数据更新标题 (例如未读消息数量):

let unreadMessages = 0;

function updateUnreadMessageCount(count) {
  unreadMessages = count;
  updateTitle(`(${unreadMessages}) New Messages - My App`);
}

// ... 当收到新消息时调用
updateUnreadMessageCount(5);

4. 使用第三方库 (例如 React 或 Vue):

在使用前端框架 like React 或 Vue 时，通常会有更特定的方式来管理标题，例如通过组件的状态或 props。 具体方法请参考相应框架的文档。 例如在 React 中，可以使用 Helmet 库来管理 title 等 meta 信息。

最佳实践:

• 避免频繁更新标题: 过于频繁地更改标题可能会导致浏览器性能问题，并对用户体验造成负面影响。
• 保持标题简洁明了: 标题应该简短、描述性强，并准确反映页面内容。
• 使用分隔符: 使用连字符 (-) 或竖线 (|) 等分隔符来区分标题的不同部分，提高可读性。
• 考虑 SEO: 标题对于 SEO 很重要，应该包含相关的关键词。

选择哪种方法取决于你的具体需求和项目环境。 对于简单的场景，直接使用 document.title 就足够了。 对于更复杂的场景，可以考虑使用模板字面量或函数。 在使用前端框架时，请参考框架的文档了解最佳实践。